adding check all and uncheck all option using value inside checkbox

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/

---

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

---

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.

---

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

链接地址: http://www.djcxy.com/p/56000.html

上一篇: 检查值为X的复选框是否未被选中？

下一篇: 添加选中全部并取消选中复选框内的所有选项