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

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.");
  }     
}

我在这里想要实现的是，提交表单时，如果问题和/或描述为空，我希望弹出一个警告框。

它似乎不适用于复选框。当我运行它时，无论是否选中复选框，都会出现警报。

谁能告诉我如何只用 Javascript 和 HTML 来实现这一点？

编辑：对不起，我的问题似乎不够清楚。我想要发生的事情是只有在所有复选框都为空且不会在选中一个复选框后弹出警报。

Answer 1

问题就在这里 - var e = document.forms["myForm"]["Issue[]"].value;

这样您选择“问题[]”复选框元素的数组并尝试获取它的值。无论检查什么，它都是""。

最好用类似的东西来检查东西

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 2

看看这个。

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;

Answer 3

希望下面的 sn-p 对你有所帮助。

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>