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

You can use jQuery like so:

jQuery

$('[name="ALL"]:checkbox').change(function () {
   if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
   else $('input:checkbox').removeAttr('checked');
});

A fiddle.

Answer 2

demo

updated_demo

HTML:

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

<div id="checkboxlist">

    <label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox4</label><br />

</div>

JS:

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

Answer 3

Add extra script according to your checkbox group:

<script language="JavaScript">
function selectAll(source) {
    checkboxes = document.getElementsByName('colors[]');
    for(var i in checkboxes)
        checkboxes[i].checked = source.checked;
}
</script>

HTML Code:

<input type="checkbox" id="selectall" onClick="selectAll(this,'color')" />Select All
<ul>
<li><input type="checkbox" name="colors[]" value="red" />Red</li>
<li><input type="checkbox" name="colors[]" value="blue" />Blue</li>
<li><input type="checkbox" name="colors[]" value="green" />Green</li>
<li><input type="checkbox" name="colors[]" value="black" />Black</li>
</ul>

Answer 4

HTML:

<form>
<label>
    <input type="checkbox" id="selectall"/> Select all
</label>
<div id="checkboxlist">
    <label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
    <label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>
</form>

JS:

$('#selectall').click(function() {
    $(this.form.elements).filter(':checkbox').prop('checked', this.checked);
});

http://jsfiddle.net/wDnAd/1/

Answer 5

I am not sure why you would use a label when you have a name on the checkbox. Use that as the selector. Plus your code has no labels in the HTML markup so it will not find anything.

Here is the basic idea

$(document).on("click",'[name="ALL"]',function() {
    $(this).siblings().prop("checked",this.checked);
});

if there are other elements that are siblings, than you would beed to filter the siblings

$(document).on("click",'[name="ALL"]',function() {
    $(this).siblings(":checkbox").prop("checked",this.checked);
});

jsFiddle

Answer 6

Only in JavaScript with auto check/uncheck functionality of master when any child is checked/unchecked.

function FnCheckAll()
    {
        var ChildChkBoxes = document.getElementsByName("ChildCheckBox");
        for (i = 0; i < ChildChkBoxes.length; i++)
        {
            ChildChkBoxes[i].checked = document.forms[0].CheckAll.checked;
        }
    }
function FnCheckChild()
    {
        if (document.forms[0].ChildCheckBox.length > document.querySelectorAll('input[name="ChildCheckBox"]:checked').length)
            document.forms[0].CheckAll.checked = false;
        else
            document.forms[0].CheckAll.checked = true;
    }

Master CheckBox:

<input type="checkbox" name="CheckAll" id="CheckAll" onchange="FnCheckAll()" />

Child CheckBox:

<input type="checkbox" name="ChildCheckBox" id="ChildCheckBox" onchange="FnCheckChild()" value="@employee.Id" />```