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
$(".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.
