Javascript 验证代码，以确保至少标记了一个复选框

Question

如何添加 javascript 验证以确保至少检查一项？

从以下课程中选择：

        <ul id="class_prices">
             <li>

                <input onclick="update()" name="lbsm" id="lsbm" type="checkbox" value="lbsm">
                <label>Law &amp; Business Study Material ($59.00)</label>
            </li>

            <li>

                <input onclick="update()" name="tsm" id="tsm" type="checkbox" value="tsm">
                <label>Trade Study Material ($59.00)</label>
            </li>
            <li>

                <input onclick="update()" name="lbepc" id="lbepc" type="checkbox" value="lbepc">
                <label>Law &amp; Business Exam Preperation Class ($50.00)</label>
            </li>
            <li>

                <input onclick="update()" name="tepc" id="tepc" type="checkbox" value="tepc">
                <label>Trade Exam Preperation Class ($50.00)</label>
            </li>

        </ul>

        </td>

            <td><h2>$<span id="coursetotal"></span></h2></td>
                </tr>

这是我拥有的 javascript 代码，它不起作用。

<script type="text/javascript">
  function valthisform() {
    var chkd = document.form1.lsbm.checked || document.form1.tsm.checked||  document.form1.lbepc.checked|| document.form1.tepc.checked

    if (chkd == true) { } else { alert ("please check a checkbox") }
  }
</script>

感谢您的反馈。

Answer 1

获取 UL 内的所有复选框，如果其中任何一个被选中，则将 chkd 变量设置为 true ：

var inputs = document.getElementById('class_prices').getElementsByTagName('input'),
    chkd = false;

for (var i=inputs.length; i--;) {
    if (inputs[i].type.toLowerCase() == 'checkbox' && inputs[i].checked) chkd = true;
}

FIDDLE

Answer 2

我刚刚测试了您的 javascript，它似乎按您的预期工作。脚本本身有一个问题，那就是它没有返回值。

<script type="text/javascript">
  function valthisform() {
    var chkd = document.form1.lsbm.checked || document.form1.tsm.checked||  document.form1.lbepc.checked|| document.form1.tepc.checked

    if (chkd) {
      return true; //Submit the form
    } else {
      alert ("please check a checkbox");
      return false; //Prevent it from being submitted
    }
  }
</script>

LiveValidationForm 也有一个附加到表单的提交处理程序，该处理程序可能会干扰您的处理程序和/或阻止提交表单。

---

有趣的事实：您的 javascript 中的 document.form1.lsbm.checked 拼写错误，因为文档中的元素的 id 拼写错误为 lsbm 而不是 lbsm。

Answer 3

试试这个代码..

HTML

<ul>
    <li><label><input type="checkbox" value="id1" style="margin-right: 10px;" name="class" checked> ABC</label></li>
    <li><label><input type="checkbox" value="id2" style="margin-right: 10px;" name="class" checked>XYZ</label></li>
    <li><label><input type="checkbox" value="id3" style="margin-right: 10px;"name="class" checked> LMN</label></li>
</ul>

JavaScript：

<script>
    $('input[type="checkbox"][name="class"]').on('change', function () {
        var getArrVal = $('input[type="checkbox"][name="class"]:checked').map(function () {
        return this.value;
    }).toArray();
        if (getArrVal.length) {
        //execute the code
    } else {
        $(this).prop("checked", true);
        alert("Select at least one column");
        return false;
    }
    });
</script>