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

Question

How would I add javascript validation to make sure that at least one of the items is checked?

Select from courses below:

        <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>

Here is javascript code that I have, which does not work.

<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>

I will appreciate your feedback.

Answer 1

Get all the checkboxes inside the UL, and if any of them are checked, set the chkd variable to 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

I just tested your javascript and it seems to be working as you expected. There is one problem with the script itself, and that is that it doesn't return a value.

<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 has a submit handler attached to the form too and that handler might interfere with your handler and/or prevent the form from being submitted.

---

Fun fact: You have document.form1.lsbm.checked properly misspelled in your javascript, as the element in your document has a properly misspelled id of lsbm instead of lbsm too.

Answer 3

Try this code..

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>