Check all other checkboxes when one is checked

Question

I have a form and group of checkboxes in it. (These checkboxes are dynamically created but I dont think it is important for this question). The code that generates them look

Answer 1

var selectedIds = [];
function toggle(source) {
    checkboxes = document.getElementsByName('ALL');
    for ( var i in checkboxes)
        checkboxes[i].checked = source.checked;
}
function addSelects() {

    var ids = document.getElementsByName('ALL');

    for ( var i = 0; i < ids.length; i++) {
        if (ids[i].checked == true) {
            selectedIds.push(ids[i].value);
        }
    }
}

In HTML:

Master Check box <input type="checkbox" onClick="toggle(this);">

Other Check boxes <input type="checkbox" name="ALL">

Answer 2

use this i hope to help you i know that this is a late answer but if any one come here again

$("#all").change(function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
    });

Answer 3

You can use the :first selector to find the first input and bind the change event to it. In my example below I use the :checked state of the first input to define the state of it's siblings. I would also suggest to put the code in the JQuery ready event.

    $('document').ready(function(){   
        $('#ScrollCB input:first').bind('change', function() {
            var first = $(this);
            first.siblings().attr('checked', first.is(':checked'));
        });
    });

Answer 4

Thanks to @Ashish, I have expanded it slightly to allow the "master" checkbox to be automatically checked or unchecked, if you manually tick all the sub checkboxes.

FIDDLE

HTML

<label><input type="checkbox" name="sample" class="selectall"/>Select all</label>

<div id="checkboxlist">
    <label><input type="checkbox" class="justone" name="sample[]"/>checkbox1</label><br/>
    <label><input type="checkbox" class="justone" name="sample[]"/>checkbox2</label><br />
    <label><input type="checkbox" class="justone" name="sample[]"/>checkbox3</label><br />
    <label><input type="checkbox" class="justone" name="sample[]"/>checkbox4</label><br />
</div>

SCRIPT

$('.selectall').click(function() {
    if ($(this).is(':checked')) {
        $('input:checkbox').prop('checked', true);
    } else {
        $('input:checkbox').prop('checked', false);
    }
});

And now add this to manage the master checkbox as well...

$("input[type='checkbox'].justone").change(function(){
    var a = $("input[type='checkbox'].justone");
    if(a.length == a.filter(":checked").length){
        $('.selectall').prop('checked', true);
    }
    else {
        $('.selectall').prop('checked', false);
    }
});