jQuery统一选择和取消选择所有复选框。

Question

我有一个选择所有/取消全选复选框的问题

代码如下：

<input type="checkbox" value="" onclick="checkedAll();" name="checkall" id="checkall"/>

  function checkedAll() {
      $('.all span').click(function () {
       if(document.getElementById("checkall").checked == true)
       {
         $('#uniform-undefined span').addClass('checked');      
       }
       else
       {
         $('#uniform-undefined span').removeClass('checked');
       }
     });
     $.uniform.update();
   }

当我选中复选框(所有复选框都为真)时，jQuery会添加一个带有class="checked"的标签

     spanTag.addClass(options.checkedClass);

没有任何复选框被选中。

<li><label><div id="uniform-undefined" class="checker">">
   <span class="checked"><input type="checkbox" value="F2" style="opacity: 0;"></span>
   </div><b>1 </b>
 </label></li>

<li><label><div id="uniform-undefined" class="checker">
   <span class="checked"><input type="checkbox" value="F2" style="opacity: 0;"></span>
   </div><b>2 </b>
</label></li>

<li><label><div id="uniform-undefined" class="checker">
    <span class="checked"><input type="checkbox" value="F3" style="opacity: 0;"></span>
    </div><b>3 </b>
</label></li>

- Nilesh patel

---

你是在尝试用一次点击选择全部吗？ - Zevi Sternlicht

你在代码中想要做什么？ - Nishant Jani

你能确保你展示的代码是正确的，没有复制粘贴错误吗？你似乎在开头多了一个 ">，而且你最后一组中的 style=opacity: 0;" 缺少了一个 "。只想确认问题不是由于奇怪的 HTML 导致的。 - Nope

如果您只想勾选所有复选框，请执行以下操作：$('input[type=checkbox]').attr('checked', true); - MCL

非常感谢提供一个 JSfiddle... - Engineer

请您能否为上述代码创建一个fiddle？ - jaychapani

Answer 1

尝试这个...

  $('#all').on('click', function(){
        $(':checkbox').attr("checked",$(this).is(':checked'));
  });

最后版本的OR。

  $('#all').on('click', function(){
        $(':checkbox').prop("checked",$(this).is(':checked'));
  });

看这个示例...

- MG_Bautista

---

我看到你做的那个了 :) ，相当不错。 - Nishant Jani

这个代码运行良好，但是最新的jQuery版本已经删除了attr并添加了prop。所以只需要更新代码，将prop替换attr即可，它就能正常工作 :) - djmzfKnm

Answer 2

你是否希望实现类似这样的目标？

$('document').ready(function(){
    $('#all').click(function(){
        if($(this).is(':checked')){
            $('.group').attr("checked",true);
        }
        else{
            $('.group').attr("checked",false);
        }
    })
});

查看此演示

- Nishant Jani

---

你应该使用属性 "checked"，而不是属性 "checked"。$('.group').prop("checked"); - Adrian J. Moreno

Answer 3

最简单的解决方案是调用uniform.update：

        $(".all span").each(function () {
            $(this).prop("checked", document.getElementById("checkall").checked );
        });
        $.uniform.update();

- Robert Benyi

Answer 4

$('document').ready(function(){
    $('#all').click(function(){
        if($(this).is(':checked')){
            $('.group').attr("checked",true);
        }
        else{
            $('.group').attr("checked",false);
        }
    })
});

这段代码只能在第一次正确运行。第二次，如果我点击“全选”复选框，它将无法工作，只会被选中。

- AndRaGhu

Answer 5

<script>
$('document').ready(function(){

    $('#selectAll').click(function(){
        if($(this).is(':checked')){
            $('#uniform-undefined span').attr("class","checked");
        }
        else{
            $('#uniform-undefined span').attr("class","");
        }
    })
});
</script>

- Ajay Kumar