如何验证是否选中了复选框？

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;