Select/deselect All Check Boxes On Click A Single Check Box By Javascript

I have a form in which I have two table with some rows . I want that when I click on select/unselect all check box than checkboxes under the that check box should checked for that

Solution 1:

With jQuery 1.6+, you can do

$('.check-all').click(function () {
    var checked = this.prop('checked');   
    this.closest('table').find(':checkbox').prop('checked', checked);
}

where check-all is a class that the two "select/unselect all" checkboxes have.

Solution 2:

There are a couple of problems with your code. The most important one is that you are a a single checked variable to keep track of the state for both forms. That cannot work. Instead, use the status of the "checkall" checkbox for the other checkboxes.

Lets assume you really have two forms (if you cannot use two forms, see below):

<formaction=""method="post"name="frm1"id="frm1"><table><tr><th>Cause List</th></tr><!-- ... --><tr><th><inputtype="checkbox"name="causelist_month"id="causelist_month"onclick="checkedAll.call(this);"/>select all/unselect all
            </th></tr></table></form><formaction=""method="post"name="frm2"id="frm2"><table><tr><th>Subscription List</th></tr><!-- ... --><tr><th><inputtype="checkbox"name="subscription_month"id="subscription_month"onclick="checkedAll.call(this);"/>select all/unselect all
            </th></tr></table></form>

Note that I changed the inline event handler to checkedAll.call(this).

Then your function should look like this:

function checkedAll() {
    // this refers to the clicked checkbox// find all checkboxes inside the checkbox' formvar elements = this.form.getElementsByTagName('input');
    // iterate and change statusfor (var i = elements.length; i--; ) {
        if (elements[i].type == 'checkbox') {
            elements[i].checked = this.checked;
        }
    }
}

DEMO

Of course there are ways to improve the code. For example you probably want to add the logic to deselect the respective "select all" checkbox when any if the other checkboxes in the table is deselected.

I also recommend to read the great introduction to event handling on quirksmode.org, to learn about other ways of binding event handlers.

---

If you cannot use two forms, you have to find another ancestor as reference point (i.e. from which you select all the checkboxes). In this case, the table element seems preferable. You have to traverse up the document, until you find it. The inline click event handler still has to be changed to checkedAll.call(this) for this to work:

function checkedAll() {
    // this refers to the clicked checkbox// find closest tablevar parent = this.parentNode;
    do {
        parent = parent.parentNode;
    } while(parent.nodeName !== 'TABLE');

    // find all checkboxes inside the checkbox' tablevar elements = parent.getElementsByTagName('input');

    // ... continue like shown above
}

Solution 3:

You code is changing all checkbox which are inside frm1. Keep two tables inside two separate div's and pass corresponding divs id to checkedAll function .

<formaction=""method="post"name="frm1"id="frm1"><divid="div1"><table><tr><th>Cause List</th></tr><?phpforeach($arras$month) { ?><tr><td><inputtype="checkbox"name="causelist_month" /><?phpecho$month; ?></td></tr><?php } ?><tr><th><inputtype="checkbox"name="causelist_month"id="causelist_month"onclick="checkedAll (div1);"/>select all/unselect all</th></tr></table></div><divid="div2">
   // Second table
   </div></form>

Solution 4:

Try this

functioncheckedAll(frm1) {
  var chk = document.getElementsByTagName('input');
  for(var i=0; i < chk.length; i++) {
    if(chk[i].type == 'checkbox') {
      chk[i].checked = frm1.checked;
    }
  }
}

or you can find more details here.

Solution 5:

Try this --

$(input[type=checkbox]').attr('checked', 'checked');

HTML -

<div><label><inputid="ChkAll"type="checkbox"onchange="javascript:CheckedAll();" /><span>SelectAll</span></label></div><divid="DivChk "><label><inputtype="checkbox" /><span>First</span></label><label><inputtype="checkbox" /><span>2nd</span></label><label><inputtype="checkbox" /><span>3rd</span></label><label><inputtype="checkbox" /><span>4th</span></label></div>

My Jquery -

functionCheckedAll(){
     if ($('#ChkAll').is(':checked')) {
          $('#DivChk input[type=checkbox]').attr('checked', 'checked');           
     }
     else {
          $('#DivChk input[type=checkbox]:checked').removeAttr('checked');
     }
   }

Try This using Jquery

BY Javascript -

functionCheckedAll(){    
     if (document.getElementById('ChkAll').checked) {
         for(i=0; i<document.getElementsByTagName('input').length;i++){
         document.getElementsByTagName('input')[i].checked = true;
         }
     }
     else {
         for(i=0; i<document.getElementsByTagName('input').length;i++){
          document.getElementsByTagName('input')[i].checked = false;
         }
     }
   }

Try This