blocks|key|32488|text|您需要使用.prop()来设置checked属性|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|32489|$("#checkAll").click(function(){
++++$('input:checkbox').not(this).prop('checked',+this.checked);
});|code-block|syntax|javascript|32490|演示：Fiddle|32491|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/prop/|1|http://jsfiddle.net/arunpjohny/w3gQJ/^0|5|7|0|0|0|3|6|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>You need to use <a href="http://api.jquery.com/prop/">.prop()</a> to set the checked property</p>

<pre><code>$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/arunpjohny/w3gQJ/">Fiddle</a></p>


blocks|key|32516|text|你可以使用下面的简单代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32517|function+checkDelBoxes(pForm,+boxName,+parent)
{
++++for+(i+=+0;+i+<+pForm.elements.length;+i%2B%2B)
++++++++if+(pForm.elements[i].name+==+boxName)
++++++++++++pForm.elements[i].checked+=+parent;
}|code-block|syntax|javascript|32518|使用示例：|32519|<a+href="javascript:;"+onclick="javascript:checkDelBoxes($(this).closest('form').get(0),+'CheckBox[]',+true);return+false;">+Select+All
</a>
<a+href="javascript:;"+onclick="javascript:checkDelBoxes($(this).closest('form').get(0),+'CheckBox[]',+false);return+false;">+Unselect+All
</a>|32520|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>You Can use below Simple Code:</p>

<pre><code>function checkDelBoxes(pForm, boxName, parent)
{
    for (i = 0; i &lt; pForm.elements.length; i++)
        if (pForm.elements[i].name == boxName)
            pForm.elements[i].checked = parent;
}
</code></pre>

<p>Example for Using:</p>

<pre><code>&lt;a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"&gt; Select All
&lt;/a&gt;
&lt;a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"&gt; Unselect All
&lt;/a&gt;
</code></pre>


blocks|key|248890|text|这里有一个完整的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|248891|$(document).ready(function()+{
++++$("#checkedAll").change(function()+{
++++++++if+(this.checked)+{
++++++++++++$(".checkSingle").each(function()+{
++++++++++++++++this.checked=true;
++++++++++++});
++++++++}+else+{
++++++++++++$(".checkSingle").each(function()+{
++++++++++++++++this.checked=false;
++++++++++++});
++++++++}
++++});

++++$(".checkSingle").click(function+()+{
++++++++if+($(this).is(":checked"))+{
++++++++++++var+isAllChecked+=+0;

++++++++++++$(".checkSingle").each(function()+{
++++++++++++++++if+(!this.checked)
++++++++++++++++++++isAllChecked+=+1;
++++++++++++});

++++++++++++if+(isAllChecked+==+0)+{
++++++++++++++++$("#checkedAll").prop("checked",+true);
++++++++++++}+++++
++++++++}
++++++++else+{
++++++++++++$("#checkedAll").prop("checked",+false);
++++++++}
++++});
});|code-block|syntax|javascript|248892|Html应该是：|248893|选中三个复选框上的单个复选框将被选中和取消选中。|248894|<input+type="checkbox"+name="checkedAll"+id="checkedAll"+/>

<input+type="checkbox"+name="checkAll"+class="checkSingle"+/>
<input+type="checkbox"+name="checkAll"+class="checkSingle"+/>
<input+type="checkbox"+name="checkAll"+class="checkSingle"+/>|248895|希望这对某人有帮助，就像对我一样。|248896|JS小提琴https://jsfiddle.net/52uny55w/|offset|length|248897|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/52uny55w/^0|0|0|0|0|0|0|5|U|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>A complete solution is here.</p>

<pre><code>$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});
</code></pre>

<p>Html should be :</p>

<p>Single check box on checked three checkbox will be select and deselect.</p>

<pre><code>&lt;input type="checkbox" name="checkedAll" id="checkedAll" /&gt;

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

<p>Hope this helps to someone as it did for me.</p>

<p>JS Fiddle <a href="https://jsfiddle.net/52uny55w/" rel="noreferrer">https://jsfiddle.net/52uny55w/</a></p>


blocks|key|248976|text|if(isAllChecked+==+0)
{+
++++$("#select_all").prop("checked",+true);+
}+++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|248977|请将上一行更改为|unstyled|248978|if(isAllChecked+==+0)
{+
++++$("#checkedAll").prop("checked",+true);+
}+++|248979|在SSR的回答和它的完美工作中，谢谢|248980|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>if(isAllChecked == 0)
{ 
    $("#select_all").prop("checked", true); 
}   
</code></pre>

<p>please change the above line to </p>

<pre><code>if(isAllChecked == 0)
{ 
    $("#checkedAll").prop("checked", true); 
}   
</code></pre>

<p>in SSR's answer and its working perfect Thank you</p>


blocks|key|249017|text|你为什么不试试这个(在第二行'form#‘中，你需要放入适当的html表单选择器)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249018|$('.checkAll').click(function(){
++++$('form#myForm+input:checkbox').each(function(){
++++++++$(this).prop('checked',true);
+++})+++++++++++++++
});

$('.uncheckAll').click(function(){
++++$('form#myForm+input:checkbox').each(function(){
++++++++$(this).prop('checked',false);
+++})+++++++++++++++
});|code-block|syntax|javascript|249019|您的html应该是这样的：|249020|<form+id="myForm">
++++++<span+class="checkAll">checkAll</span>
++++++<span+class="uncheckAll">uncheckAll</span>
++++++<input+type="checkbox"+class="checkSingle"></input>
++++++....
</form>|249021|我希望这能有所帮助。|249022|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Why don't you try this (in the 2nd line where 'form#' you need to put the proper selector of your html form):</p>

<pre><code>$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});
</code></pre>

<p>Your html should be like this:</p>

<pre><code>&lt;form id="myForm"&gt;
      &lt;span class="checkAll"&gt;checkAll&lt;/span&gt;
      &lt;span class="uncheckAll"&gt;uncheckAll&lt;/span&gt;
      &lt;input type="checkbox" class="checkSingle"&gt;&lt;/input&gt;
      ....
&lt;/form&gt;
</code></pre>

<p>I hope that helps.</p>


blocks|key|32686|text|触发器点击|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32687|$("#checkAll").click(function(){
++++$('input:checkbox').click();
});|code-block|syntax|javascript|32688|或|32689|$("#checkAll").click(function(){
++++$('input:checkbox').trigger('click');
});|32690|32691|$("#checkAll").click(function(){
++++$('input:checkbox').prop('checked',+this.checked);
});|32692|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|H|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Trigger Click</p>

<pre><code>$("#checkAll").click(function(){
    $('input:checkbox').click();
});
</code></pre>

<p>OR</p>

<pre><code>$("#checkAll").click(function(){
    $('input:checkbox').trigger('click');
});
</code></pre>

<p>OR</p>

<pre><code>$("#checkAll").click(function(){
    $('input:checkbox').prop('checked', this.checked);
});
</code></pre>


blocks|key|249079|text|if($('#chk_all').is(":checked"))
+{
++++$('#'%2Bid).attr('checked',+true);
+}
else
+{
++++$('#'%2Bid).attr('checked',+false);
+}++|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|249080|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>if($('#chk_all').is(":checked"))
 {
    $('#'+id).attr('checked', true);
 }
else
 {
    $('#'+id).attr('checked', false);
 }  
</code></pre>


blocks|key|32711|text|function+chek_al_indi(id)
{
++++var+k+=+id;
++++var+cnt_descriptiv_indictr+=+eval($('#cnt_descriptiv_indictr').val());
++++var+std_cnt+=+10;

++++if+($('#'%2B+k).is(":checked"))
++++{
++++++++for+(var+i+=+1;+i+<=+std_cnt;+i%2B%2B)++
++++++++{
++++++++++++$("#chk"%2B+k).attr('checked',true);++
++++++++++++k+=+k+%2B+cnt_descriptiv_indictr;
++++++++}
++++}

++++if+($('#'%2B+k).is(":not(:checked)"))
++++{
++++++++for+(var+i+=+1;+i+<=+std_cnt;+i%2B%2B)++
++++++++{
++++++++++++$("#chk"%2B+k).attr('checked',false);+++++
++++++++++++k+=+k+%2B+cnt_descriptiv_indictr;
++++++++}+++++++
++++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|32712|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 chek_al_indi(id)
{
    var k = id;
    var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
    var std_cnt = 10;

    if ($('#'+ k).is(":checked"))
    {
        for (var i = 1; i &lt;= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',true);  
            k = k + cnt_descriptiv_indictr;
        }
    }

    if ($('#'+ k).is(":not(:checked)"))
    {
        for (var i = 1; i &lt;= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',false);     
            k = k + cnt_descriptiv_indictr;
        }       
    }
}
</code></pre>


blocks|key|249114|text|+$('#checkall').on("click",function(){
++++++$('.chk').trigger("click");
+++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|249115|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').on("click",function(){
      $('.chk').trigger("click");
   });
</code></pre>


blocks|key|32742|text|html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32743|++++<div+class="col-md-3+general-sidebar"+id="CategoryGrid">
++++++++++++++++++++++++++++++++++++++++++++++++++++<h5>Category+&amp;+Sub+Category+<span+style="color:+red;">*+</span></h5>
++++++++++++++++++++++++++++++++++++++++++++++++++++<div+class="checkbox">
++++++++++++++++++++++++++++++++++++++++++++++++++++++++<label>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++<input+onclick="checkUncheckAll(this)"+type="checkbox">
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++All
++++++++++++++++++++++++++++++++++++++++++++++++++++++++</label>
++++++++++++++++++++++++++++++++++++++++++++++++++++</div>
++++++++++++++++++++++++++++++++++++++++++++++++<div+class="checkbox"><label><input+class="cat"+type="checkbox"+value="Quality">Quality</label></div>
<div+class="checkbox"><label><input+class="subcat"+type="checkbox"+value="Planning+process+and+execution">Planning+process+and+execution</label></div>|code-block|syntax|javascript|32744|javascript：|32745|function+checkUncheckAll(ele)+{
++++if+(ele.checked)+{
++++++++$('.cat').prop('checked',+ele.checked);
++++++++$('.subcat').prop('checked',+ele.checked);
++++}
++++else+{
++++++++$('.cat').prop('checked',+ele.checked);
++++++++$('.subcat').prop('checked',+ele.checked);
++++}
}|32746|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>html :</p>

<pre><code>    &lt;div class="col-md-3 general-sidebar" id="CategoryGrid"&gt;
                                                    &lt;h5&gt;Category &amp;amp; Sub Category &lt;span style="color: red;"&gt;* &lt;/span&gt;&lt;/h5&gt;
                                                    &lt;div class="checkbox"&gt;
                                                        &lt;label&gt;
                                                            &lt;input onclick="checkUncheckAll(this)" type="checkbox"&gt;
                                                            All
                                                        &lt;/label&gt;
                                                    &lt;/div&gt;
                                                &lt;div class="checkbox"&gt;&lt;label&gt;&lt;input class="cat" type="checkbox" value="Quality"&gt;Quality&lt;/label&gt;&lt;/div&gt;
&lt;div class="checkbox"&gt;&lt;label&gt;&lt;input class="subcat" type="checkbox" value="Planning process and execution"&gt;Planning process and execution&lt;/label&gt;&lt;/div&gt;
</code></pre>

<p>javascript:</p>

<pre><code>function checkUncheckAll(ele) {
    if (ele.checked) {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
    else {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
}
</code></pre>


blocks|key|32760|text|++++++++++++<pre>
++++++++++++<SCRIPT+language="javascript">
++++++++++++$(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");
++++++++++++++++++++}

++++++++++++++++});
++++++++++++});
++++++++++++</SCRIPT>
++++++++++++<HTML>
++++++++++++<HEAD>
++++++++++++<script+type="text/javascript"+src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
++++++++++++<TITLE>Multiple+Checkbox+Select/Deselect+-+DEMO</TITLE>
++++++++++++</HEAD>
++++++++++++<BODY>
++++++++++++<H2>Multiple+Checkbox+Select/Deselect+-+DEMO</H2>
++++++++++++<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>
++++++++++++</BODY>
++++++++++++</HTML>
++++++++++++</pre>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|32761|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>            &lt;pre&gt;
            &lt;SCRIPT language="javascript"&gt;
            $(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");
                    }

                });
            });
            &lt;/SCRIPT&gt;
            &lt;HTML&gt;
            &lt;HEAD&gt;
            &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
            &lt;TITLE&gt;Multiple Checkbox Select/Deselect - DEMO&lt;/TITLE&gt;
            &lt;/HEAD&gt;
            &lt;BODY&gt;
            &lt;H2&gt;Multiple Checkbox Select/Deselect - DEMO&lt;/H2&gt;
            &lt;table border="1"&gt;
              &lt;tr&gt;
                &lt;th&gt;&lt;input type="checkbox" id="selectall"/&gt;&lt;/th&gt;
                &lt;th&gt;Cell phone&lt;/th&gt;
                &lt;th&gt;Rating&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" class="case" name="case" value="1"/&gt;&lt;/td&gt;
                &lt;td&gt;BlackBerry Bold 9650&lt;/td&gt;
                &lt;td&gt;2/5&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" class="case" name="case" value="2"/&gt;&lt;/td&gt;
                &lt;td&gt;Samsung Galaxy&lt;/td&gt;
                &lt;td&gt;3.5/5&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" class="case" name="case" value="3"/&gt;&lt;/td&gt;
                &lt;td&gt;Droid X&lt;/td&gt;
                &lt;td&gt;4.5/5&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" class="case" name="case" value="4"/&gt;&lt;/td&gt;
                &lt;td&gt;HTC Desire&lt;/td&gt;
                &lt;td&gt;3/5&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" class="case" name="case" value="5"/&gt;&lt;/td&gt;
                &lt;td&gt;Apple iPhone 4&lt;/td&gt;
                &lt;td&gt;5/5&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
            &lt;/BODY&gt;
            &lt;/HTML&gt;
            &lt;/pre&gt;
</code></pre>


blocks|key|249157|text|使用.prop()获取属性的值|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|249158|$("#checkAll").change(function+()+{
++++$("input:checkbox").prop('checked',+$(this).prop("checked"));
});|code-block|syntax|javascript|249159|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/prop/#prop1^0|2|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>use <a href="http://api.jquery.com/prop/#prop1" rel="nofollow noreferrer">.prop()</a> to get the value of a property</p>

<pre><code>$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});
</code></pre>


blocks|key|32839|text|我知道有很多答案张贴在这里，但我想把这个贴出来优化代码，我们可以在全球使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32840|我尽了最大努力|32841|/*----------------------------------------
+*++Check+and+uncheck+checkbox+which+will+global
+*++Params+:+chk_all_id=id+of+main+checkbox+which+use+for+check+all+dependant,+chk_child_pattern=start+pattern+of+the+remain+checkboxes+
+*++Developer+Guidline+:+For+to+implement+this+function+Developer+need+to+just+add+this+line+inside+checkbox+{{+class="check_all"+dependant-prefix-id="PATTERN_WHATEVER_U_WANT"+}}
+----------------------------------------*/
function+checkUncheckAll(chk_all_cls,chiled_patter_key){
++++if($("."%2Bchk_all_cls).prop('checked')+==+true){
++++++++$('input:checkbox[id%5E="'%2Bchiled_patter_key%2B'"]').prop('checked',+'checked');
++++}else{
++++++++$('input:checkbox[id%5E="'%2Bchiled_patter_key%2B'"]').removeProp('checked',+'checked');
++++}++++++++
}

if($(".check_all").get(0)){
++++var+chiled_patter_key+=+$(".check_all").attr('dependant-prefix-id');

++++$(".check_all").on('change',function(){++++++++
++++++++checkUncheckAll('check_all',chiled_patter_key);
++++});

++++/*------------------------------------------------------
+++++*+this+will+remain+checkbox+checked+if+already+checked+before+ajax+call!+:)
+++++------------------------------------------------------*/
++++$(document).ajaxComplete(function()+{
++++++++checkUncheckAll('check_all',chiled_patter_key);
++++});
}|code-block|syntax|javascript|32842|我希望这能有所帮助！|32843|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>i know there are lot of answer posted here but i would like to post this for optimization of code and we can use it globally.</p>

<p>i tried my best</p>

<pre><code>/*----------------------------------------
 *  Check and uncheck checkbox which will global
 *  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes 
 *  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
 ----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
    if($("."+chk_all_cls).prop('checked') == true){
        $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
    }else{
        $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
    }        
}

if($(".check_all").get(0)){
    var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');

    $(".check_all").on('change',function(){        
        checkUncheckAll('check_all',chiled_patter_key);
    });

    /*------------------------------------------------------
     * this will remain checkbox checked if already checked before ajax call! :)
     ------------------------------------------------------*/
    $(document).ajaxComplete(function() {
        checkUncheckAll('check_all',chiled_patter_key);
    });
}
</code></pre>

<p>I hope this will help!</p>


blocks|key|249195|text|++++<p+id="checkAll">Check+All</p>
<hr+/>
<input+type="checkbox"+class="checkItem">Item+1
<input+type="checkbox"+class="checkItem">Item+2
<input+type="checkbox"+class="checkItem">Item3|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|249196|和jquery|unstyled|249197|$(document).on('click','#checkAll',function+()+{
+++++$('.checkItem').not(this).prop('checked',+this.checked);
+});|249198|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>    &lt;p id="checkAll"&gt;Check All&lt;/p&gt;
&lt;hr /&gt;
&lt;input type="checkbox" class="checkItem"&gt;Item 1
&lt;input type="checkbox" class="checkItem"&gt;Item 2
&lt;input type="checkbox" class="checkItem"&gt;Item3
</code></pre>

<p>And jquery</p>

<pre><code>$(document).on('click','#checkAll',function () {
     $('.checkItem').not(this).prop('checked', this.checked);
 });
</code></pre>


blocks|key|249216|text|我知道的最简单的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249217|$('input[type="checkbox"]').prop("checked",+true);|offset|length|style|CODE|249218|entityMap^0|0|0|1E|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Simplest way I know:</p>

<p><code>$('input[type="checkbox"]').prop("checked", true);</code></p>


blocks|key|249253|text|您可以直接对jQuery选择器的结果运行.prop()，即使它返回多个结果。所以：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|249254|$("input[type='checkbox']").prop('checked',+true)|249255|entityMap^0|K|7|0|0|1D|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

<p>You can run <code>.prop()</code> on the results of a jQuery Selector directly even if it returns more than one result. So:</p>

<p><code>$("input[type='checkbox']").prop('checked', true)</code></p>


blocks|key|32926|text|function+checkAll(class_name)+{
++++$("."+%2B+class_name).each(function+()+{+
++++++++if+(this.checked+==+true)+
++++++++++++this.checked+=+false;+
++++++++else+
++++++++++++this.checked+=+true;+
++++});+
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|32927|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 checkAll(class_name) {
    $("." + class_name).each(function () { 
        if (this.checked == true) 
            this.checked = false; 
        else 
            this.checked = true; 
    }); 
}
</code></pre>


blocks|key|32963|text|我认为当用户手动选择全部复选框时，应自动选中全部复选框，或者用户取消选中所有选定复选框中的一个复选框时，应自动取消选中全部复选框。这是我的代码..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|32964|$('#checkall').change(function+()+{
++++$('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function+()+{
+if+($('.cb-element:checked').length+==+$('.cb-element').length){
++$('#checkall').prop('checked',true);
+}
+else+{
++$('#checkall').prop('checked',false);
+}
});|code-block|syntax|javascript|32965|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input+type="checkbox"+name="all"+id="checkall"+/>Check+All</br>
<input+type="checkbox"+class="cb-element"+/>+Checkbox++1</br>
<input+type="checkbox"+class="cb-element"+/>+Checkbox++2</br>
<input+type="checkbox"+class="cb-element"+/>+Checkbox++3|32966|​|32967|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|D|7|O|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I think when user select all checkbox manually then checkall should be checked automatically or user unchecked one of them from all selected checkbox then checkall should be unchecked automically.
here is my code..
<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>$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="checkbox" name="all" id="checkall" /&gt;Check All&lt;/br&gt;
&lt;input type="checkbox" class="cb-element" /&gt; Checkbox  1&lt;/br&gt;
&lt;input type="checkbox" class="cb-element" /&gt; Checkbox  2&lt;/br&gt;
&lt;input type="checkbox" class="cb-element" /&gt; Checkbox  3</code></pre>
</div>
</div>
</p>


blocks|key|32998|text|$('#checkAll').on('change',+function(){
++++if($(this).attr('checked')){
++++++++$('input[type=checkbox]').attr('checked',true);
++++}
++++else{
++++++++$('input[type=checkbox]').removeAttr('checked');
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|32999|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').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});
</code></pre>


blocks|key|249398|text|checkall是will复选框的id，cb-child是将根据checkall+click事件被选中和取消选中的每个复选框的名称|type|unstyled|depth|inlineStyleRanges|entityRanges|data|249399|$("#checkall").click(function+()+{
++++++++++++++++++++++++if(this.checked){
++++++++++++++++++++++++++++$("input[name='cb-child']").each(function+(i,+el)+{
++++++++++++++++++++++++++++++++el.setAttribute("checked",+"checked");
++++++++++++++++++++++++++++++++el.checked+=+true;
++++++++++++++++++++++++++++++++el.parentElement.className+=+"checked";

++++++++++++++++++++++++++++});
++++++++++++++++++++++++}else{
++++++++++++++++++++++++++++$("input[name='cb-child']").each(function+(i,+el)+{
++++++++++++++++++++++++++++++++el.removeAttribute("checked");
++++++++++++++++++++++++++++++++el.parentElement.className+=+"";
++++++++++++++++++++++++++++});
++++++++++++++++++++++++}
++++++++++++++++++++});|code-block|syntax|javascript|249400|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>checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event</p>

<pre><code>$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });
</code></pre>


blocks|key|33069|text|我的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|33070|​|33071|$(function()+{
++++$(".checkAll").click(function(){
++++++++checkwhat++=+$(this).data("checkwhat");
++++++++$('input:checkbox.'%2Bcheckwhat).not(this).prop('checked',+this.checked);
++++});
++});|code-block|syntax|javascript|33072|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<lablel><input+type="checkbox"+name="chkSelectAll"+class="checkAll"+data-checkwhat="chkSelect">check+all+group+1</lablel>
<br>
<input+class="chkSelect"+type="checkbox"+name="chkSelect[]"+value="1">++value+1.1<br>
<input+class="chkSelect"+type="checkbox"+name="chkSelect[]"+value="2">+value+1.2<br>
<input+class="chkSelect"+type="checkbox"+name="chkSelect[]"+value="3">++value+1.2<br>
<br>
<br>
<lablel><input+type="checkbox"+name="chkSelectAll"+class="checkAll"+data-checkwhat="chkSelect2">check+all+group+1</lablel>
<br>
<input+class="chkSelect2"+type="checkbox"+name="chkSelect[]"+value="1">+value+2.1<br>
<input+class="chkSelect2"+type="checkbox"+name="chkSelect[]"+value="4">value+2.1<br>|33073|33074|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>my solution</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>$(function() {
    $(".checkAll").click(function(){
        checkwhat  = $(this).data("checkwhat");
        $('input:checkbox.'+checkwhat).not(this).prop('checked', this.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;lablel&gt;&lt;input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect"&gt;check all group 1&lt;/lablel&gt;
&lt;br&gt;
&lt;input class="chkSelect" type="checkbox" name="chkSelect[]" value="1"&gt;  value 1.1&lt;br&gt;
&lt;input class="chkSelect" type="checkbox" name="chkSelect[]" value="2"&gt; value 1.2&lt;br&gt;
&lt;input class="chkSelect" type="checkbox" name="chkSelect[]" value="3"&gt;  value 1.2&lt;br&gt;
&lt;br&gt;
&lt;br&gt;
&lt;lablel&gt;&lt;input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect2"&gt;check all group 1&lt;/lablel&gt;
&lt;br&gt;
&lt;input class="chkSelect2" type="checkbox" name="chkSelect[]" value="1"&gt; value 2.1&lt;br&gt;
&lt;input class="chkSelect2" type="checkbox" name="chkSelect[]" value="4"&gt;value 2.1&lt;br&gt;</code></pre>
</div>
</div>
</p>


<p>I am not expert with jQuery but I have tried to create a little script for my application. I want to check all checkboxes but it isn't working correctly.</p>

<p>First I tried to use <code>attr</code> and after that I tried with <code>prop</code> but I'm doing something wrong.</p>

<p>I tried this first:</p>

<pre><code>$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});
</code></pre>

<p>But this didn't work.</p>

<p>Next: This worked better than above code</p>

<pre><code>$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});
</code></pre>

<p>Both examples don't work.</p>

<p>JSFiddle: <a href="http://jsfiddle.net/hhZfu/4" rel="noreferrer">http://jsfiddle.net/hhZfu/4/</a></p>


How to check all checkboxes using jQuery?

jQuery

我不是jQuery专家，但我已经尝试为我的应用程序创建了一个小脚本。我想选中所有的复选框，但它不能正常工作。首先，我尝试使用attr，之后我又尝试使用prop，但我做错了一些事情。我先试了一下：$("#checkAll").change(function(){  if (! $('input:checkbox').is...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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