1

I'm using Kartik Visweswaran's bootstrap styled checkboxes because I need big easy boxes for tablet/phone users on my web app. Here's what a typical box looks like:

<div class="checkbox">
    <input id="check1"
            name="option1" 
            type="checkbox" 
            value="0"
            class="checkbox" 
            data-toggle="checkbox-x" 
            data-three-state="false" 
            data-size="lg">
    <label>$this->cut</label>
</div>

Note that the input tag is not nested between in the label tags (does this screw up screen readers? Is it a bug?). The checkbox-x doesn't toggle if you nest it. You can verify this behaviour by playing with the jsfiddle below.

I'm validating that at least one checkbox is checked with something like this:

function check_checkboxes(checkboxes) {
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            alert("at least one checkbox is checked");
            return true;
        }
    }
    //if no checkboxes were checked, return false
    return false;
}
$("#submit_button").click( function(e){
    if(!(check_checkboxes($(".checkbox")))){
        //if no checkboxes are checked, warn
        alert("No checkboxes checked.");
});

I'm aware of the imput checked state vs DOM checked state issue described in this question here, but the jquery .checked method seems to be validating the checked status fine, as per this fiddle that I created. The DOM is updated to the OPPOSITE of the true checked state of the box (i.e. here's a firebug screenshot of a box when it's checked). Verify this yourself! This is a bug I guess?

So the question: how do I validate that at least one checkbox-x is checked with javascript in a way that doesn't have much frankencode which does the opposite of what it means? Or is there a better way to get big checkboxes (like jquery-ui)? I'm trying to avoid using form validation rules, because it doesn't quite suit the complex form and the presentation of warning alerts that I'm creating.

1 Answer 1

0

Well after trying out a few other libraries, I like checkBo. Here's a working fiddle, and yes, it does update the DOM correctly.

HTML

<div>
    <form action="#" method="post">
        <label class="cb-checkbox cb-md">
            <input id="check1" type="checkbox" class="checkbox" name="option1" value="0" />Option 1</label>
        <label class="cb-checkbox cb-md">
            <input id="check2" type="checkbox" class="checkbox" name="option2" value="0" />Option 2</label>
        <label class="cb-checkbox cb-md">
            <input id="check3" type="checkbox" class="checkbox" name="option3" value="0" />Option 3</label>
    </form>
</div>
<button id="submit_button" type="button" class="btn btn-success">Submit</button>

JS

$checkboxes = $("input.checkbox");
$(document).ready(function () {
    $("form").checkBo();
});

function check_checkboxes(checkboxes) {
    if (checkboxes !== null) {
        alert("checkboxes are not null, length = " + checkboxes.length);
    } else {
        alert("null checkbox list");
    }
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            //        if (checkboxes[i].is(":checked")) {
            alert("return true");
            return true;
        }
    }
    alert("return false");
    return false;
}

$("#submit_button").click(function (e) {
    if (!(check_checkboxes($checkboxes))) {
        e.preventDefault();
        alert("no checkboxes are checked");
    } else {
        alert("at least one checkbox is checked");
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.