Check/Uncheck checkboxes on select of a master checkbox in jquery

Question

I have a checkboc in my column header. Onclick of it, all the checkboxes needs to be checked and on uncheck of master checkbox all should be unchecked. I googled a lot but I got only javascript code for this kind of thing. But I want pure JQuery thing.I am pasting my code here. Now onclick of master checkbox, all the checkboxes are checking but master checkbox itself Can somebody help me with jquery code.

This is my header checkbox:

<input type="checkbox" onclick="checkBoxChecked()" id="mastercheck" name ="mastercheck"/>

Onclick method is

function checkBoxChecked(){
         try{

        var checkboxes=document.getElementsByName("test");

        for(i=0;i<document.getElementsByName("test").length;i++)
        {
         checkboxes[i].checked = "checked";
        }

        }
        catch(e)
        {

        }

        document.getElementById("mastercheck").checked="checked";
        return true;

        }

Answer 1

HTML:

<input type="checkbox" id="ckbCheckAll" />
    <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

JQuery:

$(document).ready(function () {
    $("#ckbCheckAll").click(function () {
        $(".checkBoxClass").prop('checked', $(this).prop('checked'));
    });
});

Live Demo

Answer 2

$(document).ready(function() {
    $("#mastercheck").click(function() {
        var checkBoxes = $("input[name=test]");
        checkBoxes.prop("checked", this.checked);
    });                 
});

Answer 3

Try

function checkBoxChecked() {
    $('input[name=test]').prop('checked', $('#mastercheck').is(':checked'))
}

Answer 4

The checked property should be set to true | false true | false

Answer 5

checkboxes[i].checked = true;

If that doesn't work, you should check out this question: Changing a checkbox's state programmatically in dashcode

Answer 6

Why dont you try someting like this :

$('.master-checkbox').click(function(){
    var master_checkbox = $(this);
    $('input[type="checkbox"]').prop('checked', master_checkbox.prop('checked'));
});

Answer 7

You can try something like this :

$('#mastercheck').on('change', function() {
  if ($(this).is(':checked')) {
    // Check all
    $('.childcheck').prop('checked', true);
  }
  else {
    // Uncheck all
    $('.childcheck').prop('checked', false);
  }
});

Answer 8

<b> <input type="checkbox" id="ckbCheckAll" /> Check/Uncheck me </b>
 <p id="checkBoxes">
        <input type="checkbox" class="checkBoxClass" id="Checkbox1" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox2" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox3" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox4" />
        <br />
        <input type="checkbox" class="checkBoxClass" id="Checkbox5" />
        <br />
    </p>

$(document).ready(function() {
      $('#ckbCheckAll').click(function(){
        var isChecked = $('#ckbCheckAll').is(':checked');
        if(isChecked)
        {
            $('.checkBoxClass').attr('checked', true);
        }

        else
        {
               $('.checkBoxClass').attr('checked', false); 
        }

      });
    });