Penyelesaian Jquery untuk memilih semua dan menyongsangkan pilihan dan melaksanakannya sekali dengan satu click

Penyelesaian Jquery untuk memilih semua dan menyongsangkan pilihan dan melaksanakannya sekali dengan satu click_jquery

WBOY

Lepaskan： 2016-05-16 15:45:01

asal

1184 orang telah melayarinya

Keperluan kod: menggunakan attr hanya boleh dilaksanakan sekali, menggunakan prop boleh merealisasikan semua pemilihan dan pemilihan songsang dengan sempurna, memperoleh semua item yang dipilih dan membentuk teks item yang dipilih menjadi rentetan.

Penyelesaian 1:

Kodnya adalah seperti berikut:

<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>

Salin selepas log masuk

Ringkasan:

Untuk atribut yang wujud bagi elemen HTML itu sendiri, gunakan kaedah prop semasa memproses.

Untuk atribut DOM tersuai kami sendiri bagi elemen HTML, gunakan kaedah attr semasa memprosesnya.

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

Penyelesaian 2:

Penerangan masalah:

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

Salin selepas log masuk

Klik pertama dan kedua kod di atas boleh merealisasikan fungsi pemilihan dan pilihan songsang, tetapi ia tidak lagi berfungsi selepas satu masa

Kecuali kotak pilihan pertama, selebihnya dijana secara dinamik oleh ajax Adakah ini ada kaitan dengannya? Console.log boleh mengeluarkan 1 dan 2 secara bergilir-gilir setiap kali ia diklik, tetapi kod di tengah tidak boleh dilaksanakan.

Penyelesaian:

Hanya satu parameter removeAttr diperlukan, removeAttr("ditanda")
Walau bagaimanapun, adalah disyorkan untuk menggantikannya dengan

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

Salin selepas log masuk

Atau lebih ringkas,

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

Salin selepas log masuk

Di atas adalah penyelesaian Jquery untuk memilih semua dan menyongsangkan pemilihan dengan satu klik. Saya harap ia akan membantu semua orang.