adding check all and uncheck all option using value inside checkbox

Question

I am trying to create a select all, unselect all options like we see in email inboxes for a group of checkboxes. I have added an example for this. The working model that I am trying to get is when a I click on checkbox, it should select and unselect that group with a particular value. Also even if we uncheck any single name form the list, it should uncheck the main "select all" checkbox. I've added a jsfiddle, but it doesnt work properly.

$(document).ready(function(){
    $("#selectAll").live("click",function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        var clickedValue=$(this).attr('class');
        clickedValue=clickedValue.replace("select", "");
        $("#modalEntity").attr("value", "group"+ clickedValue).attr("checked", true);      
    });
});

http://jsfiddle.net/EBxSu/

sQVe · Answer 1 · 2012-08-21T08:36:29.190

2

UPDATE (changed live to on & some renaming)

First, you should never have elements with the same ID like this:

<input id="modalEntity" class="entity1" type="checkbox" value="group1" name="India">India
<input id="modalEntity" class="entity2" type="checkbox" value="group1" name="UAE">UAE

I rewrote the jQuery code to this:

    $(document).ready(function() {
    "use strict";
    $("input.select").on("click", function() {
        $(this).siblings().find("input.entity").prop("checked", $(this).is(":checked"));
    });

    $("input.entity").on("click", function() {
        var $entityGroup = $(this).siblings().andSelf();
        $(this).parent().siblings("input.select").prop("checked", $entityGroup.length === $entityGroup.filter(":checked").length);
    });
});

.prop() should only be used on jQuery 1.6 and above.

I also rewrote you HTML a bit, look at the updated jsFiddle here: http://jsfiddle.net/sQVe/EBxSu/8/

Just comment if I missed something, but I think this is what you're after.

edited Aug 21 '12 at 08:36

answered Aug 21 '12 at 06:40

sQVe

1,977
12
16

Just a nitpick: it's entities, not entitys. And, my mother tongue is also not English. :-) – nalply Aug 21 '12 at 06:42
@nalply you are oh-so-correct. English is not my native tongue either so, updated the post. – sQVe Aug 21 '12 at 06:47
Good catch, Vins, I didn't know that live has been deprecated. We are all here to learn. – nalply Aug 21 '12 at 06:50
@Vins Totally missed that he used `.live()`. Updated the post to use `.on()` instead. Good catch. – sQVe Aug 21 '12 at 06:51

SexyBeast · Answer 2 · 2012-08-21T06:57:16.777

I didn't understand you solution, but here's one. First, keep similar groups of buttons with a common attribute, say relation, having a value of child. Then keep the selector/deselector for that group with the same name but the value of relation attribute set to parent. Now you have to

1.Toggle the state of all similar child checkboxes when the mother's state is toggled:

$("[relation=parent]").change(function() {
 name = $(this).prop('name');
  $("[relation=child][name="+name+"]").attr('checked',$(this).attr('checked'));
});

2.Toggle the mother's state accordingly when a child's state is toggled:

$("[relation=parent]").change(function() {
 name = $(this).attr('name');
 $("[relation=child][name="+name+"]").attr('checked',$(this).attr('checked'));
});
$("[relation=child]").change(function() {
 name = $(this).attr('name');
 if ($(this).attr('checked') == false) {
   $("[relation=parent][name="+name+"]").attr('checked',false);
  }
 else {
   if ($("[name="+name+"][relation=child]:checked").length == $("[name="+name+"][relation=child]").length) {
     $("[name="+name+"][relation=parent]").attr('checked','true');
    }
   }
  });

Ummm, where are the errors? I will correct the formatting. Always a problem! — SexyBeast, Aug 21 '12 at 06:46

score 0 · Answer 3 · answered Aug 21 '12 at 06:42

I have done that for countries only. Html:

<ul>
<li>
Country
<ul>
<input type="checkbox" id="selectAll" class="select1">Select/Deselect All Country
<li>
<input class="entity1 countries" type="checkbox" value="group1" name="India">India
<input class="entity2 countries" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>
<li>

JavaScript:

$(document).ready(function(){
$("#selectAll").click(function(){
    if(!$('.countries').attr('checked'))
        $('.countries').attr('checked','checked');
    else
        $('.countries').removeAttr('checked');
});
$('.countries').click(function(){
    var allChecked = true;
    $('.countries').each(function(index, element){
       if(!$(element).attr('checked'))
           allChecked = false;
    });
    if(!allChecked)
        $("#selectAll").removeAttr('checked');        
    else
        $("#selectAll").attr('checked','checked');         
});
});

Jack · Accepted Answer · 2012-08-21T06:50:35.900

I updated your code a bit removing multiple IDs and handling the various scenario requested (clearing the select all check box if user selects a child). Also updated your jQuery using .on() rather than .live().

jQuery looks like:

$(function(){
  $('.selectAll').on('click', function(evt){
    var group = $(this).attr('data-group'),
        isChecked = !!($(this).prop('checked'));
    $('input[value="' + group + '"]').prop('checked', isChecked);    
  })

  $('.entity').on('click', function(evt){
    var group = $(this).attr('value'),
        siblings = $('input[value="' + group + '"]'),
        isChecked = true;
    siblings.each(function(idx, el){
      if(!$(el).prop('checked')) {
        isChecked = false;
        return;
      }
    })
    $('.selectAll[data-group="' + group + '"]').prop('checked', isChecked);
  })
})

And the updated HTML:

<ul>
<li>
Country
<ul>
<input type="checkbox" class="selectAll" data-group="group1">Select/Deselect All Country
<li>
<input class="entity" type="checkbox" value="group1" name="India">India
<input class="entity" type="checkbox" value="group1" name="UAE">UAE
...
</ul>
</li>
</ul>

Here's the fiddle: http://jsfiddle.net/nBh4L/2/

Thanks! Jack

Please post your code also here, at least the relevant parts. — nalply, Aug 21 '12 at 06:45
Is it possible to get the details( id, class, name) of the child checkboxes associated each main checkbox while clicking on select all option.. — Da Silva, Aug 21 '12 at 10:53

score 0 · Answer 5 · answered Aug 21 '12 at 06:48

I updated your JS fiddle with a more correct soltuion:

http://jsfiddle.net/EBxSu/2/

There are a few things that I would like you point out that you are doing wrong, and maybe it will help you with this:

You were using HTML "id" and class" attributes wrong. ID should be unique. Class need not be unique - I switched them around for you.
You don't need to prevent default unless you don't want the checkbox to be checked.
You had a with text inside a tag - this is not valid. Only
can exist within a tag - so I moved it out side of the
jQuery should not be complicated. It can be very simple. I moved the HTML around a bit (check the link).

Your javascript code is now simply:

$(document).ready(function() {
    $(".selectAll").click(function(e) {
        $(this).siblings('ul').find('input').attr('checked', $(this).is(":checked"));
    });
});

score 0 · Answer 6 · answered Aug 21 '12 at 06:50

ID's are meant to be unique per page, but ignoring some of the mark-up problems with your code, I have edited it so it works as you intended. http://jsfiddle.net/xYWWM/5/

$(document).ready(function() {
    $("#selectAll").live("click", function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var clickedValue = $(this).attr('class');
        clickedValue = clickedValue.replace("select", "");
        var checkboxes = $("#modalEntity[value=\"group" + clickedValue + "\"]");
        checkboxes.attr("checked", !checkboxes.attr("checked"));
});

});

score 0 · Answer 7 · answered Aug 21 '12 at 06:56

Follow this Tutorial

http://viralpatel.net/blogs/multiple-checkbox-select-deselect-jquery-tutorial-example/

Also, Check out this Fiddle for Demo

Here is the HTML used in the Demo,

<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

Here is the jQuery for the Demo

$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});

score 0 · Answer 8 · edited May 23 '17 at 12:04

There are couple of things you should note while write you code.
1. Keep it simple.
2. Do not use id multiple times
3. Write a html code. Nesting <ul><inputl><li> is not a good idea.

This is simplified solution, which hopefully you'll be able to understand and will be able to implement in later at different situation.

HTML:

<input type="checkbox" id="btn-select-all-1">Select/un-select All
<ul>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
  <li><input type="checkbox" class="select1">item1</li>
</ul>

Jquery:

$(document).ready(function(){

    var btnSelectAll = $("#btn-select-all-1");
    var toSelect = $('.select1')

     //monitor the select_all checkbox for changes
     //and take appropriate action
    btnSelectAll.on('click', function(){
        if(btnSelectAll.is(":checked")){
          toSelect.attr("checked", "checked");
        }else{
          toSelect.removeAttr("checked");
        }
      });

});

jsFiddle: http://jsfiddle.net/U8aFU/

more help and links:
Check if checkbox is checked with jQuery
Setting "checked" for a checkbox with jQuery?

score 0 · Answer 9 · answered Aug 21 '12 at 08:56

I've modified your HTML slightly since you used same ID twice ...Below is the working script...

<ul><li>
Country
<ul>
<input type="checkbox" id="selectAll1" class="selectAll">Select/Deselect All Country
<li>
<input id="modalEntity1" class="entity" type="checkbox" value="group1"   name="India">India
<input id="modalEntity2" class="entity" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>

<li>Company<ul>
<input type="checkbox" id="selectAll2" class='selectAll'>Select/Deselect All Company</a>
<li>
<input id="modalEntity3" class="entity" type="checkbox" value="group2" name="Apple">Apple
<input id="modalEntity4" class="entity" type="checkbox" value="group2" name="Google">Google
</li>
</ul>
</li>
</ul>

jQuery:

$(document).ready(function(){
  $('.selectAll').click(function(){
  var thisStatus = $(this).attr('checked');
    if(thisStatus=='checked'){        
       $(this).parent('ul').find('input[type="checkbox"]').attr('checked','checked');
    }
    else{
       $(this).parent('ul').find('input[type="checkbox"]').attr('checked',false);
    }
});

$('input.entity').click(function(){
var thisStatus = $(this).attr('checked');
    if(thisStatus!=='checked'){
       $(this).parent().parent('ul').find('input.selectAll').attr('checked',false);
    }
    else{
        $("input.entity:checked").each(function(){
        $(this).parent().parent('ul').find('input.selectAll').attr('checked','checked');   
    });
    }

    });
 });

adding check all and uncheck all option using value inside checkbox

9 Answers9