jQuerys Vorgang, bei dem alle Kontrollkästchen ausgewählt und alle Kontrollkästchen deaktiviert werden-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

jQuerys Vorgang, bei dem alle Kontrollkästchen ausgewählt und alle Kontrollkästchen deaktiviert werden

Feb 06, 2017 pm 01:09 PM

Ich zeige Ihnen zuerst die Renderings. Wenn Sie damit einverstanden sind, lesen Sie bitte weiterhin den Implementierungscode.

jQuery对checkbox 复选框的全选全不选反选的操作

HTML-Code:

&lt;body&gt;
&lt;ul id=&quot;list&quot;&gt;
&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;items&quot; value=&quot;1&quot;&gt; 1.时间都去哪儿了&lt;/label&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;items&quot; value=&quot;2&quot;&gt; 2.海阔天空&lt;/label&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;items&quot; value=&quot;3&quot;&gt; 3.真的爱你&lt;/label&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;items&quot; value=&quot;4&quot;&gt; 4.不再犹豫&lt;/label&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;items&quot; value=&quot;5&quot;&gt; 5.光辉岁月&lt;/label&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;items&quot; value=&quot;6&quot;&gt; 6.喜欢妳&lt;/label&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;all&quot;&gt; 全选/全不选&lt;/br&gt;
&lt;input type=&quot;button&quot; value=&quot;全选&quot; class=&quot;btn&quot; id=&quot;selectAll&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;全不选&quot; class=&quot;btn&quot; id=&quot;unSelect&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;反选&quot; class=&quot;btn&quot; id=&quot;reverse&quot;&gt;
&lt;input type=&quot;button&quot; value=&quot;获得选中的所有值&quot; id=&quot;btn&quot; id=&quot;getValue&quot;&gt;
&lt;/body&gt;

Nach dem Login kopieren

JQuery-Code:

&lt;script type=&quot;text/javascript&quot;&gt;
$(function(){
//全选/全不选
$(&quot;#all&quot;).click(function(){
$(&quot;[name=items]:checkbox&quot;).attr(&quot;checked&quot;,this.checked);
});
$(&quot;[name=items]:checkbox&quot;).click(function(){
var flag=true;
$(&quot;[name=items]:checkbox&quot;).each(function(){
if(!this.checked){
flag=false;
}
});
$(&quot;#all&quot;).attr(&quot;checked&quot;,flag);
})
//全选
$(&quot;#selectAll&quot;).click(function(){
$(&quot;[name=items]:checkbox&quot;).each(function(){
$(this).attr(&quot;checked&quot;,true);
});
});
//全不选
$(&quot;#unSelect&quot;).click(function(){
$(&quot;[name=items]:checkbox&quot;).each(function(){
$(this).attr(&quot;checked&quot;,false);
});
});
//反选
$(&quot;#reverse&quot;).click(function(){
$(&quot;[name=items]:checkbox&quot;).each(function(){ //遍历每一个复选框
//$(this).attr(&quot;checked&quot;,!$(this).attr(&quot;checked&quot;)); //jQuery方法取复选框的反向值
this.checked=!this.checked; //js方法
});
});
//输出选中的值
$(&quot;#btn&quot;).click(function(){
var str=&quot;你选中的是：\r\n&quot;;
$(&quot;[name=items]:checkbox:checked&quot;).each(function(){
str+=$(this).val()+&quot;\r\n&quot;;
});
alert(str);
});
})
&lt;/script&gt;

Nach dem Login kopieren

Hinweis: Aufgrund der Änderung der JQuery-Version kann die neue Version nur einmal angeklickt werden. Die ältere Version ist in Ordnung, aber die neue Version kann attr nicht zum Festlegen des ausgewählten Status verwenden . Die erste Lösung besteht darin, die native js-Methode this.checked=true/false; zu verwenden.

Die zweite Lösung besteht darin, attr durch prop zu ersetzen.

Das Obige ist die jQuery-Operation, die Ihnen der Editor vorstellt, um alle auszuwählen, die Auswahl aufzuheben und das Kontrollkästchen umzukehren. Wenn Sie Fragen haben, lassen Sie es mich bitte wissen Hinterlassen Sie eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere jQuery-bezogene Artikel zum Vorgang „Alles auswählen“, „Auswahl aufheben“ und „Invertieren des Kontrollkästchens“ finden Sie auf der chinesischen PHP-Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn