Question

I have a checkbox which will toggle some other check boxes on a html form:

<input type="checkbox" name="selector" onclick="toggle_all(this);"/>

<script language="javascript">
function toggle_all(source) {
    var checkboxes = $(":input[name^='form[r']");
    if($(source).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
    alert('done');
}
</script>

First time I click the “selector” check box, all check boxes with names starting “form[r” will be checked. Then when “selector” check box is unchecked, all others are unchecked as well. Since then checking/unchecking “selector” checkbox doesn’t affect other checkboxes. The code is running because alert(‘done’) shows up. What’s wrong here?

Answer 1

I would suggest an improvement. Change HTML, add some class to all your checkboxes:

<input class="check" type="checkbox" name="form[r]">

And JS:

function toggle_all(source) {
    $(".check").prop('checked', source.checked);
}

http://jsfiddle.net/tFv3G/

And the reason why is that searching elements by its attributes much slower than by class name. And less readable as well.