blocks|key|354415|text|您应该使用同名的类，ID必须是唯一的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354416|<input+type="checkbox"+name="checkAll"+id="checkAll">全選
<input+type="checkbox"+name="book"+class="book"+value="book1">book1
<input+type="checkbox"+name="book"+class="book"+value="book2">book2
<input+type="checkbox"+name="book"+class="book"+value="book3">book3
<input+type="checkbox"+name="book"+class="book"+value="book4">book4
<input+type="checkbox"+name="book"+class="book"+value="book5">book5</table>

$(function+()+{
++++$("#checkAll").click(function+()+{
++++++++if+($("#checkAll").is(':checked'))+{
++++++++++++$(".book").prop("checked",+true);
++++++++}+else+{
++++++++++++$(".book").prop("checked",+false);
++++++++}
++++});
});|code-block|syntax|javascript|354417|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You should be using classes with the same name, ID's MUST be unique!</p>

<pre><code>&lt;input type="checkbox" name="checkAll" id="checkAll"&gt;全選
&lt;input type="checkbox" name="book" class="book" value="book1"&gt;book1
&lt;input type="checkbox" name="book" class="book" value="book2"&gt;book2
&lt;input type="checkbox" name="book" class="book" value="book3"&gt;book3
&lt;input type="checkbox" name="book" class="book" value="book4"&gt;book4
&lt;input type="checkbox" name="book" class="book" value="book5"&gt;book5&lt;/table&gt;

$(function () {
    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $(".book").prop("checked", true);
        } else {
            $(".book").prop("checked", false);
        }
    });
});
</code></pre>


blocks|key|136672|text|用j08691的答案看下面的事情也..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136673|创建像#id+#id这样的选择器完全没有意义，因为根据定义，ID在DOM中必须是唯一的。|136674|<input+type="checkbox"+name="checkAll"+class="checkAll">

$("#tab1+.checkAll").click(function+()+{|code-block|syntax|javascript|136675|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>With answer of j08691 look into following thing also..</p>

<p>It totally makes no sense to create a selector like #id #id because an ID has to be unique within your DOM by definition.</p>

<pre><code>&lt;input type="checkbox" name="checkAll" class="checkAll"&gt;

$("#tab1 .checkAll").click(function () {
</code></pre>


blocks|key|354478|text|添加此too....FOR.....如果取消选中一个复选框(id:book)，则表示将取消选中主复选框(id:checkAll|type|unstyled|depth|inlineStyleRanges|entityRanges|data|354479|$("#tab1+#book").click(function+()+{
++if($('#book').is(':checked'))
++{
++++$("#checkAll").prop("checked",+false);++++++++
++}
});|code-block|syntax|javascript|354480|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Add this too....FOR.....  if one checkbox (id:book) is unselected means it will cause the main check box (id:checkAll) to be  unselected</p>

<pre><code>$("#tab1 #book").click(function () {
  if($('#book').is(':checked'))
  {
    $("#checkAll").prop("checked", false);        
  }
});
</code></pre>


blocks|key|136730|text|$("input[name='select_all_photos']").click(function+()+{
++++++++var+checked+=+$(this).is(':checked');
++++++++$("input[name%5E='delete_']").each(function+()+{
++++++++++++$(this).prop("checked",+checked);
++++++++});
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|136731|不要费心去做if语句。|unstyled|136732|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>$("input[name='select_all_photos']").click(function () {
        var checked = $(this).is(':checked');
        $("input[name^='delete_']").each(function () {
            $(this).prop("checked", checked);
        });
    });
</code></pre>

<p>Don't bother doing an if statement.</p>


blocks|key|136772|text|我刚刚简化了@j08691的答案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136773|​|136774|$("#checkAll").click(function()+{
++++++var+allChecked+=+$(this);
++++++$("#tab1+input[type=checkbox]").each(function()+{
++++++++$(this).prop("checked",+allChecked.is(':checked'));
++++++})
++++});|code-block|syntax|javascript|136775|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table+id="tab1">
++<tr>
++++<td>
++++++<input+type="checkbox"+name="checkAll"+id="checkAll">Select+all
++++++<input+type="checkbox"+name="book"+id="book"+value="book1">book1
++++++<input+type="checkbox"+name="book"+id="book"+value="book2">book2
++++++<input+type="checkbox"+name="book"+id="book"+value="book3">book3
++++</td>
++</tr>
</table>|136776|136777|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I've just simplified @j08691 answer</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#checkAll").click(function() {
      var allChecked = $(this);
      $("#tab1 input[type=checkbox]").each(function() {
        $(this).prop("checked", allChecked.is(':checked'));
      })
    });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;table id="tab1"&gt;
  &lt;tr&gt;
    &lt;td&gt;
      &lt;input type="checkbox" name="checkAll" id="checkAll"&gt;Select all
      &lt;input type="checkbox" name="book" id="book" value="book1"&gt;book1
      &lt;input type="checkbox" name="book" id="book" value="book2"&gt;book2
      &lt;input type="checkbox" name="book" id="book" value="book3"&gt;book3
    &lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|136785|text|最快的方法。并保存一些行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136786|+++$(".ulPymnt+input[type=checkbox]").each(function(){++++++++++++++++
+++++++$(this).prop("checked",+!$(this).prop("checked"))++++++++++++++++
+++})|code-block|syntax|javascript|136787|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>the fastest way. and save some lines</p>

<pre><code>   $(".ulPymnt input[type=checkbox]").each(function(){                
       $(this).prop("checked", !$(this).prop("checked"))                
   })
</code></pre>


blocks|key|136791|text|`change+click+to+ch++$("#checkAll").click();+to+$("#checkAll").change();

>+Blockquote

$(function+()+{
+$("#checkAll").change(function+()+{
++if+($("#checkAll").is(':checked'))+{
+++$(".book").prop("checked",+true);
+++}+else+{
+++$(".book").prop("checked",+false);
++}
+});
});`|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|136792|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>`change click to ch  $("#checkAll").click(); to $("#checkAll").change();

&gt; Blockquote

$(function () {
 $("#checkAll").change(function () {
  if ($("#checkAll").is(':checked')) {
   $(".book").prop("checked", true);
   } else {
   $(".book").prop("checked", false);
  }
 });
});`
</code></pre>


blocks|key|136826|text|这一条适用于所有复选框列表。只需将"check-all“添加到控制它的输入，它必须具有相同的名称|type|unstyled|depth|inlineStyleRanges|entityRanges|data|136827|$(function()+{
++$('.check-all').each(function(){
++++var+checkListName+=+$(this).attr('name');
++++$(this).change(function(){
++++++//change+all+checkbox+of+the+list+checked+status
++++++$('input[name="'%2BcheckListName%2B'"]').prop('checked',+$(this).prop('checked'));+
++++});
++++$('input[name="'%2BcheckListName%2B'"]').change(function(){
++++++//change+.check-all+checkbox+depending+of+the+list+checked+status
++++++$('input[name="'%2BcheckListName%2B'"].check-all').prop('checked',+($('input[name="'%2BcheckListName%2B'"]:checked').not('.check-all').length+==+$('input[name="'%2BcheckListName%2B'"]').not('.check-all').length));
++++});
++});
});|code-block|syntax|javascript|136828|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This one work for all checkbox lists.
just add "check-all" to the input controlling that, which must have the same name</p>

<pre><code>$(function() {
  $('.check-all').each(function(){
    var checkListName = $(this).attr('name');
    $(this).change(function(){
      //change all checkbox of the list checked status
      $('input[name="'+checkListName+'"]').prop('checked', $(this).prop('checked')); 
    });
    $('input[name="'+checkListName+'"]').change(function(){
      //change .check-all checkbox depending of the list checked status
      $('input[name="'+checkListName+'"].check-all').prop('checked', ($('input[name="'+checkListName+'"]:checked').not('.check-all').length == $('input[name="'+checkListName+'"]').not('.check-all').length));
    });
  });
});
</code></pre>


<p>I use jquery-1.9.1.js
In my html page, it works well for the first time.</p>

<p>just like        <a href="http://jsfiddle.net/pzCcE/1/">http://jsfiddle.net/pzCcE/1/</a></p>

<p>Can somebody help me to improve it?</p>

<pre><code>&lt;table id="tab1"&gt;
    &lt;input type="checkbox" name="checkAll" id="checkAll"&gt;全選
    &lt;input type="checkbox" name="book" id="book" value="book1"&gt;book1
    &lt;input type="checkbox" name="book" id="book" value="book2"&gt;book2
    &lt;input type="checkbox" name="book" id="book" value="book3"&gt;book3
    &lt;input type="checkbox" name="book" id="book" value="book4"&gt;book4
    &lt;input type="checkbox" name="book" id="book" value="book5"&gt;book5&lt;/table&gt;

$(function () {
    $("#tab1 #checkAll").click(function () {
        if ($("#tab1 #checkAll").is(':checked')) {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", true);
            });

        } else {
            $("#tab1 input[type=checkbox]").each(function () {
                $(this).attr("checked", false);
            });
        }
    });
});
</code></pre>


check uncheck All checkboxes with another single checkbox use jquery

我在我的html页面中使用了jquery-1.9.1.js，它第一次工作得很好。就像一样有人能帮我改进一下吗？<table id="tab1">    <input type="checkbox" name="checkAll" id="checkAll">全選    <input type="checkbox" na...

问选中使用jquery取消选中所有复选框和另一个复选框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中使用jquery取消选中所有复选框和另一个复选框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问选中使用jquery取消选中所有复选框和另一个复选框
EN