blocks|key|1333850|text|一个更完整的示例，它应该适用于您的情况：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1333851|​|1333852|$('#select_all').change(function()+{
++var+checkboxes+=+$(this).closest('form').find(':checkbox');
++checkboxes.prop('checked',+$(this).is(':checked'));
});|code-block|syntax|javascript|1333853|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
++<table>
++++<tr>
++++++<td><input+type="checkbox"+id="select_all"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++</table>
</form>|1333854|1333855|当单击#select_all复选框时，复选框的状态被选中，并且当前表单中的所有复选框都设置为相同的状态。|offset|length|style|CODE|1333856|注意，您不需要从选择中排除#select_all复选框，因为它将与所有其他复选框具有相同的状态。如果出于某种原因，您确实需要排除#select_all，则可以使用以下命令：|1333857|1333858|$('#select_all').change(function()+{
++var+checkboxes+=+$(this).closest('form').find(':checkbox').not($(this));
++checkboxes.prop('checked',+$(this).is(':checked'));
});|1333859|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
++<table>
++++<tr>
++++++<td><input+type="checkbox"+id="select_all"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++</table>
</form>|1333860|1333861|entityMap^0|0|0|0|0|0|3|B|0|D|B|1S|B|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@$N|17|O|18|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|19|8|@$N|1A|O|1B|P|Q]|$N|1C|O|1D|P|Q]]|9|@]|A|$]]|$1|T|3|C|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1F|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|Y|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|10|$]]

<p>A more complete example that should work in your case:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox');
  checkboxes.prop('checked', $(this).is(':checked'));
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" id="select_all" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>When the <code>#select_all</code> checkbox is clicked, the status of the checkbox is checked and all the checkboxes in the current form are set to the same status.</p>

<p>Note that you don't need to exclude the <code>#select_all</code> checkbox from the selection as that will have the same status as all the others. If you for some reason do need to exclude the <code>#select_all</code>, you can use this:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#select_all').change(function() {
  var checkboxes = $(this).closest('form').find(':checkbox').not($(this));
  checkboxes.prop('checked', $(this).is(':checked'));
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" id="select_all" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1118824|text|$('.checkall').change(function()+{
++++var+checkboxes+=+$(this).closest('table').find('td').find(':checkbox');
++++if($(this).is(':checked'))+{
++++++++checkboxes.attr('checked',+'checked');
++++}+else+{
++++++++checkboxes.removeAttr('checked');
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1118825|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>$('.checkall').change(function() {
    var checkboxes = $(this).closest('table').find('td').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
</code></pre>


blocks|key|1118859|text|简单明了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118860|​|1118861|$('#select_all').click(function()+{
++var+c+=+this.checked;
++$(':checkbox').prop('checked',+c);
});|code-block|syntax|javascript|1118862|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
++<table>
++++<tr>
++++++<td><input+type="checkbox"+id="select_all"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++++<tr>
++++++<td><input+type="checkbox"+name="select[]"+/></td>
++++</tr>
++</table>
</form>|1118863|1118864|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>Simple and clean:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#select_all').click(function() {
  var c = this.checked;
  $(':checkbox').prop('checked', c);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" id="select_all" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1333956|text|+$(function()+{++
$('#select_all').click(function()+{
++++var+checkboxes+=+$(this).closest('form').find(':checkbox');
++++if($(this).is(':checked'))+{
++++++++checkboxes.attr('checked',+'checked');
++++}+else+{
++++++++checkboxes.removeAttr('checked');
++++}
});
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1333957|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> $(function() {  
$('#select_all').click(function() {
    var checkboxes = $(this).closest('form').find(':checkbox');
    if($(this).is(':checked')) {
        checkboxes.attr('checked', 'checked');
    } else {
        checkboxes.removeAttr('checked');
    }
});
    });
</code></pre>


blocks|key|1118902|text|+$(document).ready(function(){
++++$("#select_all").click(function(){
++++++var+checked_status+=+this.checked;
++++++$("input[name='select[]']").each(function(){
++++++++this.checked+=+checked_status;
++++++});
++++});
++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1118903|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> $(document).ready(function(){
    $("#select_all").click(function(){
      var checked_status = this.checked;
      $("input[name='select[]']").each(function(){
        this.checked = checked_status;
      });
    });
  });
</code></pre>


blocks|key|1118951|text|由于1.9%2B+()方法，Top+answer在Jquery+attr中将不起作用。改用prop()：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1118952|$(function()+{
++++$('#select_all').change(function(){
++++++++var+checkboxes+=+$(this).closest('form').find(':checkbox');
++++++++if($(this).prop('checked'))+{
++++++++++checkboxes.prop('checked',+true);
++++++++}+else+{
++++++++++checkboxes.prop('checked',+false);
++++++++}
++++});
});|code-block|syntax|javascript|1118953|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>Top answer will not work in Jquery 1.9+ because of attr() method. Use prop() instead:</p>

<pre><code>$(function() {
    $('#select_all').change(function(){
        var checkboxes = $(this).closest('form').find(':checkbox');
        if($(this).prop('checked')) {
          checkboxes.prop('checked', true);
        } else {
          checkboxes.prop('checked', false);
        }
    });
});
</code></pre>


blocks|key|1334039|text|++$("#select_all").live("click",+function(){
++++++++++++$("input").prop("checked",+$(this).prop("checked"));
++++}
++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1334040|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>  $("#select_all").live("click", function(){
            $("input").prop("checked", $(this).prop("checked"));
    }
  });
</code></pre>


blocks|key|1334060|text|$("#select_all").change(function+()+{

++++$('input[type="checkbox"]').prop("checked",+$(this).prop("checked"));

});++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1334061|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>$("#select_all").change(function () {

    $('input[type="checkbox"]').prop("checked", $(this).prop("checked"));

});  
</code></pre>


blocks|key|1334277|text|这是我写的一个基本的jQuery插件，它可以选择页面上的所有复选框，除了要用作切换的复选框/元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334278|(function($)+{
++++//+Checkbox+toggle+function+for+selecting+all+checkboxes+on+the+page
++++$.fn.toggleCheckboxes+=+function()+{
++++++++//+Get+all+checkbox+elements
++++++++checkboxes+=+$(':checkbox').not(this);

++++++++//+Check+if+the+checkboxes+are+checked/unchecked+and+if+so+uncheck/check+them
++++++++if(this.is(':checked'))+{
++++++++++++checkboxes.prop('checked',+true);
++++++++}+else+{
++++++++++++checkboxes.prop('checked',+false);
++++++++}
++++}
}(jQuery));|code-block|syntax|javascript|1334279|然后简单地调用复选框或按钮元素上的函数：|1334280|//+Check+all+checkboxes
$('.check-all').change(function()+{
++++$(this).toggleCheckboxes();
});|1334281|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Here's a basic jQuery plugin I wrote that selects all checkboxes on the page, except the checkbox/element that is to be used as the toggle:</p>

<pre><code>(function($) {
    // Checkbox toggle function for selecting all checkboxes on the page
    $.fn.toggleCheckboxes = function() {
        // Get all checkbox elements
        checkboxes = $(':checkbox').not(this);

        // Check if the checkboxes are checked/unchecked and if so uncheck/check them
        if(this.is(':checked')) {
            checkboxes.prop('checked', true);
        } else {
            checkboxes.prop('checked', false);
        }
    }
}(jQuery));
</code></pre>

<p>Then simply call the function on your checkbox or button element:</p>

<pre><code>// Check all checkboxes
$('.check-all').change(function() {
    $(this).toggleCheckboxes();
});
</code></pre>


blocks|key|1119206|text|jQuery(document).ready(function+()+{
++++++++jQuery('.select-all').on('change',+function+()+{
++++++++++++if+(jQuery(this).is(':checked'))+{
++++++++++++++++jQuery('input.class-name').each(function+()+{
++++++++++++++++++++this.checked+=+true;
++++++++++++++++});
++++++++++++}+else+{
++++++++++++++++jQuery('input.class-name').each(function+()+{
++++++++++++++++++++this.checked+=+false;
++++++++++++++++});
++++++++++++}
++++++++});
++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1119207|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>jQuery(document).ready(function () {
        jQuery('.select-all').on('change', function () {
            if (jQuery(this).is(':checked')) {
                jQuery('input.class-name').each(function () {
                    this.checked = true;
                });
            } else {
                jQuery('input.class-name').each(function () {
                    this.checked = false;
                });
            }
        });
    });
</code></pre>


<p>I need help with jQuery selectors. Say I have a markup as shown below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" id="select_all" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="select[]" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>How to get all checkboxes except <code>#select_all</code> when user clicks on it?</p>


How to select all checkboxes with jQuery?

jQuery

我需要关于jQuery选择器的帮助。假设我有一个如下所示的标记：​<form>  <table>    <tr>      <td><input type="checkbox" id="select_all" /></td>    </tr>    <tr>      <td><input type="checkbox...

问如何使用jQuery选中所有复选框？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery选中所有复选框？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery选中所有复选框？
EN