suchen

Heim >Web-Frontend >js-Tutorial >Jquery-Lösung zum Auswählen aller und zum Umkehren der Auswahl sowie zum einmaligen Ausführen mit einem Klick_jquery

Jquery-Lösung zum Auswählen aller und zum Umkehren der Auswahl sowie zum einmaligen Ausführen mit einem Klick_jquery

WBOY
WBOYOriginal
2016-05-16 15:45:011223Durchsuche

Codeanforderungen: Die Verwendung von attr kann nur einmal ausgeführt werden, die Verwendung von prop kann die gesamte Auswahl und Umkehrauswahl perfekt realisieren, alle ausgewählten Elemente abrufen und den Text des ausgewählten Elements in eine Zeichenfolge umwandeln.

Lösung 1:

Der Code lautet wie folgt: 

<html>
<head>
　　<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
　　<input type="checkbox" name="chk_list[]" value="1" />1
　　<input type="checkbox" name="chk_list[]" value="2" />2
　　<input type="checkbox" name="chk_list[]" value="3" />3
　　<input type="checkbox" name="chk_list[]" value="4" />4
　　<input type="checkbox" name="chk_all" id="chk_all" />全选/取消全选
<script type="text/javascript">
　　$("#chk_all").click(function(){
 　　// 使用attr只能执行一次
 　　$("input[name='chk_list[]']").attr("checked", $(this).attr("checked")); 
 　　// 使用prop则完美实现全选和反选
 　　$("input[name='chk_list[]']").prop("checked", $(this).prop("checked"));
　　　　// 获取所有选中的项并把选中项的文本组成一个字符串
 　　var str = '';
 　　$($("input[name='chk_list[]']:checked")).each(function(){
 　　str += $(this).next().text() + ',';
 　　});
 　　alert(str);
　　});
</script>
</body>
</html>

Zusammenfassung:

Für die inhärenten Attribute des HTML-Elements selbst verwenden Sie bei der Verarbeitung die prop-Methode.

Für unsere eigenen benutzerdefinierten DOM-Attribute von HTML-Elementen verwenden Sie bei der Verarbeitung die Methode attr.

Referenz http://www.jb51.net/article/62308.htm

Lösung 2:

Problembeschreibung: 

$(".chooseall").click(function(){
 if($(".chooseall").attr("checked") == "checked"){
$("input[name='checkbox1']").removeAttr("checked","checked");
 console.log(1);
 }else{
 $("input[name='checkbox1']").attr("checked","checked");
 console.log(2);
 }
});

Der erste und zweite Klick des obigen Codes können die Auswahl- und Umkehrauswahlfunktionen realisieren, aber nach einem Mal funktioniert es nicht mehr.

Mit Ausnahme des ersten Kontrollkästchens werden die restlichen dynamisch von Ajax generiert. Hat das etwas damit zu tun? Console.log kann bei jedem Klick abwechselnd 1 und 2 ausgeben, der Code in der Mitte kann jedoch nicht ausgeführt werden.

Lösung:

Es ist nur ein Parameter „removeAttr“ erforderlich, „removeAttr("checked")
Es wird jedoch empfohlen, es durch

zu ersetzen 
$(".chooseall").click(function(){
 if($(".chooseall").prop("checked") == true){
 $("input[name='checkbox1']").prop("checked", false);
 console.log(1);
 }else{
 $("input[name='checkbox1']").prop("checked", false);
 console.log(2);
 }
});

Oder prägnanter: 

$(".chooseall").click(function(){
 var isChecked = $(this).prop("checked");
 $("input[name='checkbox1']").prop("checked", isChecked);
});

Das Obige ist die Jquery-Lösung zum Auswählen aller Elemente und zum Umkehren der Auswahl mit einem Klick. Ich hoffe, dass sie für alle hilfreich ist.

Stellungnahme：
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
Vorheriger Artikel：jQuery Basics Learning Guide_jqueryNächster Artikel：jQuery Basics Learning Guide_jquery

In Verbindung stehende Artikel

Mehr sehen