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

希望以下代码段可以帮助您。

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;

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

3 个答案: