如何驗證是否選中了復選框？

Question

我開始學習Javascript並感到震驚。 我的HTML代碼如下：

<form name="myForm" action="js" onsubmit="return validateForm()" method="get">

<fieldset>
    <legend> Issue </legend>
    <p>
        <label>
            <input type="checkbox" id="issue1" name="Issue[]" value="HTML" /> HTML
        </label>
        <label>
             <input type="checkbox" id="issue2" name="Issue[]" value="CSS" /> CSS
        </label>
        <label>
            <input type="checkbox" id="issue3" name="Issue[]" value="JavaScript" /> JavaScript
        </label>
        <label>
            <input type="checkbox" id="issue4" name="Issue[]" value="PHP" /> PHP 
        </label>
        <label>
            <input type="checkbox" id="issue5" name="Issue[]" value="MySQL" /> MySQL 
        </label>
        <br />
        <label>Description of Issue
            <br />
            <textarea name="description" rows="4" cols="20">
                Enter comments here 
            </textarea>
        </label>
    </p>        
</fieldset>

<p>
    <input type="Submit" value="Register"/>
    <input type="Reset" value="Reset" />
</p>

這是我的Javascript：

function validateForm() {
  var e = document.forms["myForm"]["Issue[]"].value;
  var f = document.forms["myForm"]["description"].value;

  if (e == null || e == "") {
    alert("Must select an Issue.");
  }

  if (f == null || f == "") {
    alert("Must fill in a description.");
  }     
}

我要在這里做的是， 在提交表單時，如果Issue和/或Description保留為空，我希望彈出一個警告框 。

它似乎不適用於復選框。 當我運行它時，無論是否選中復選框，都會顯示警報。

除了Javascript和HTML之外，有人可以啟發我如何實現這一目標嗎？

編輯：對不起，看來我的問題還不夠清楚。 我要發生的是僅在所有復選框均留為空白且選擇一個復選框后不會彈出的情況下才彈出警報。

Answer 1

希望以下代碼段對您有所幫助。

 function validateForm() { var els = document.forms["myForm"].elements["Issue[]"]; var f = document.forms["myForm"]["description"].value; var isValid = false; for (i = 0; i < els.length; i += 1) { if (els[i].checked) { isValid = true; } } if (!isValid) { alert("Must select an Issue."); return false; } if (f == null || f == "") { alert("Must fill in a description."); return false; } } 

 <form name="myForm" action="js" onsubmit="return validateForm()" method="get"> <fieldset> <legend> Issue </legend> <p> <label> <input type="checkbox" id="issue1" name="Issue[]" value="HTML" /> HTML </label> <label> <input type="checkbox" id="issue2" name="Issue[]" value="CSS" /> CSS </label> <label> <input type="checkbox" id="issue3" name="Issue[]" value="JavaScript" /> JavaScript </label> <label> <input type="checkbox" id="issue4" name="Issue[]" value="PHP" /> PHP </label> <label> <input type="checkbox" id="issue5" name="Issue[]" value="MySQL" /> MySQL </label> <br /> <label>Description of Issue <br /> <textarea name="description" rows="4" placeholder="Enter comments here" cols="20"></textarea> </label> </p> </fieldset> <p> <input type="Submit" value="Register" /> <input type="Reset" value="Reset" /> </p> </form> 

Answer 2

問題在這里var e = document.forms["myForm"]["Issue[]"].value;

這樣，您可以選擇“ Issue []”復選框元素的數組並嘗試獲取其值。 無論選中什么，它都將是"" 。

最好使用類似的東西來檢查東西

var isIssueChecked = function(){
      var ischecked = false;
      document.forms["myForm"]["Issue[]"].forEach(function(cb){
        if(cb.checked){
            ischecked = cb.checked;
        }
      });
      return ischecked;
    };

完整代碼https://jsfiddle.net/5m0Lbsr6/2/

UPD

 var validateForm = function() { var isIssueChecked = function() { var isChecked = false; document.forms["myForm"]["Issue[]"].forEach(function(cb) { if (cb.checked) { isChecked = cb.checked; } }); return isChecked; }, f = document.forms["myForm"]["description"].value; if (!isIssueChecked()) { alert("Must select an Issue."); } if (f == null || f == "") { alert("Must fill in a description."); } } 

 <form name="myForm" action="js" onsubmit="return validateForm()" method="post"> <fieldset> <legend> Issue </legend> <p> <label> <input type="checkbox" id="issue1" name="Issue[]" value="HTML" /> HTML </label> <label> <input type="checkbox" id="issue2" name="Issue[]" value="CSS" /> CSS </label> <label> <input type="checkbox" id="issue3" name="Issue[]" value="JavaScript" /> JavaScript </label> <label> <input type="checkbox" id="issue4" name="Issue[]" value="PHP" /> PHP </label> <label> <input type="checkbox" id="issue5" name="Issue[]" value="MySQL" /> MySQL </label> <br /> <label>Description of Issue <br /> <textarea name="description" rows="4" cols="20"> Enter comments here </textarea> </label> </p> </fieldset> <p> <input type="Submit" value="Register" /> <input type="Reset" value="Reset" /> </p> </form> 

Answer 3

看看這個。

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_checkbox_order

for (i = 0; i < coffee.length; i++) {
    if (coffee[i].checked) {
    //If a checkbox is checked, store its value and exit the function
        txt = coffee[i].value;
        return true;
    }
}
//If none are checked you will it will show a alert
alert("Must select an Issue.");
return false;