cari

Rumah >hujung hadapan web >tutorial js >Penyelesaian Jquery untuk memilih semua dan menyongsangkan pilihan dan melaksanakannya sekali dengan satu click_jquery

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

WBOY
WBOYasal
2016-05-16 15:45:011174semak imbas

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>

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);
 }
});

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);
 }
});

Atau lebih ringkas, 

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

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Panduan Pembelajaran Asas jQuery_jqueryArtikel seterusnya：Panduan Pembelajaran Asas jQuery_jquery

Artikel berkaitan

Lihat lagi