Javascript validation code to make sure that at least one checkbox is marked

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.

Your code was pretty messy... and it was just a few lines! Use proper indentation so that is easier to read. Never use something like `chkd == true`. If you really need to test if something is true, use `if( chkd )`. In your case, chkd is either `undefined` or `"checked"`. `if( chkd == true )` will return false in either case. Use either `if( chkd == undefined )` or `if( !chkd )` and remove the empty code block altogether. — Sumurai8, Jun 28 '13 at 19:41
I tried that and it does not work. This is the page that I'm working on. https://www.contractorsintelligence.com/secured_payment/postinglist-promotional-offer-59.php — Leo Vorontsov, Jun 28 '13 at 20:07
http://stackoverflow.com/questions/7960208/jquery-if-checkbox-is-checked — Sumurai8, Jun 28 '13 at 22:35

score 0 · Answer 1 · answered Jun 28 '13 at 19:31

0

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

answered Jun 28 '13 at 19:31

adeneo

312,895
29
395
388

Just wondering if you know of any reason to use `.type.toLowerCase()`. I've never seen a case where, even if the attribute is in caps, the property isn't converted to lowercase. Then again, I don't do this check often/ever, and haven't tested in many/all browsers – Ian Jun 28 '13 at 19:35
@Ian - Uhm, well, can't say that I've ever seen the type in uppercase either, I just convert stuff to make sure, as I always tend to f**k up when comparing tagNames, and they return in uppercase ! – adeneo Jun 28 '13 at 19:37
Haha yeah, I definitely know to use this for `tagName`, I was just wondering specifically about `.type`. No big deal, just wondering :) – Ian Jun 28 '13 at 19:40
I'm new to javascript. I tried to set these variable to true, but it still does not work. Should I post this code into Javascript that I have above. also you are mentioning "input" and "checkbox", should I replace those with the actual variable name of the check box? Thanks for your feedback. – Leo Vorontsov Jun 28 '13 at 20:01

score 0 · Accepted Answer · answered Jun 28 '13 at 23:03

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.

Thanks for your input. I tried your code and it still does not work. Is there anyway that I can fix it and have a Live Validation? — Leo Vorontsov, Jul 01 '13 at 15:50
I am not familiar with LiveValidationForm. Can't you somehow put this in LiveValidationForm? — Sumurai8, Jul 01 '13 at 16:07
Thanks! The code only worked after I fixed the PHP side. I used if function in php. — Leo Vorontsov, Jul 01 '13 at 23:57

score 0 · Answer 3 · edited Nov 01 '17 at 07:57

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>

Could you explain what you've done here? That helps the user understand why this is an answer. — Edwin, Nov 01 '17 at 07:51
by default all check box checked,when i uncheck last checkbox give javascript alert message.. — Rupesh Wankhede, Nov 01 '17 at 08:48

Javascript validation code to make sure that at least one checkbox is marked

3 Answers3