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;

        }

why in the world are you setting the checkbox to true? Do you want them not to be able to unselect it? Set it to true and false, not the string checked. Where is your attempt at jQuery. Break it into small parts. Get all the checkboxes, check the state, set the property. TADA. — epascarello, Sep 24 '13 at 08:50
Why do you want it in jQuery when vanilla JavaScript does the job? — Harry, Sep 24 '13 at 08:50
I don't understand why people give a negative vote and discourage people. I understand there might be trivial question which might take few seconds of time of experienced people, but gradually your help might groom others. Please be considerate. — Ashish Jain, Sep 24 '13 at 08:56
Thanks Ashish. I am newbee to IT field and I am working without any training. So I am putting lot of simple questions. — Sanjay Malhotra, Sep 24 '13 at 09:03
@Harry it was not intended to you as person, sorry if it felt like. It was general as I saw many people doing this, if anybody find question irrelevant or doesn't want to solve it, they can easily move out as we do for queries which we think we might not provide solutions for. — Ashish Jain, Sep 24 '13 at 11:09
@AshishJain No worries mate. I knew you didn't intend it at me. I was just trying to reason :) — Harry, Sep 24 '13 at 12:58

score 10 · Accepted Answer · answered Sep 24 '13 at 08:51

10

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

answered Sep 24 '13 at 08:51

NaYaN

1,300
7
11

what do you want? describe here or provide some live demo like jsfiddle – NaYaN Sep 24 '13 at 08:55
Onclick of Master Check box I want all the checkboxes to be checked. And on unchecking all should get unchecked. My doubt is should I write $(document) inside my onclick method? – Sanjay Malhotra Sep 24 '13 at 09:02
1

no..its not need to write $(document) function again in side click event....see my code – NaYaN Sep 24 '13 at 09:03
See I have put onclclick property for my master checkbox. Inside that method, what should I write? I mean from where should I copy ur code?? – Sanjay Malhotra Sep 24 '13 at 09:06
1

but you have not need to make that checkBoxChecked() event. Jquery code will automatically run. – NaYaN Sep 24 '13 at 09:17

score 3 · Answer 2 · answered Sep 24 '13 at 08:54

3

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

answered Sep 24 '13 at 08:54

tranceporter

2,241
1
21
23

score 1 · Answer 3 · answered Sep 24 '13 at 08:50

1

Try

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

answered Sep 24 '13 at 08:50

Arun P Johny

384,651
66
527
531

score 1 · Answer 4 · answered Sep 24 '13 at 08:50

1

The checked property should be set to true | false

answered Sep 24 '13 at 08:50

Deepak Ingole

14,912
10
47
79

score 1 · Answer 5 · edited May 23 '17 at 12:21

1

checkboxes[i].checked = true;

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

edited May 23 '17 at 12:21

Community

1
1

answered Sep 24 '13 at 08:51

mitchfuku

309
1
2
7

score 1 · Answer 6 · answered Sep 24 '13 at 08:51

1

Why dont you try someting like this :

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

answered Sep 24 '13 at 08:51

Thomas

397
6
13

score 1 · Answer 7 · answered Sep 24 '13 at 08:52

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);
  }
});

score 1 · Answer 8 · answered Mar 25 '14 at 13:06

<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); 
        }

      });
    });

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

8 Answers8

Linked