Rumah > hujung hadapan web > tutorial js > JS melaksanakan kotak semak CheckBox untuk memilih semua dan tiada kemahiran function_javascript

JS melaksanakan kotak semak CheckBox untuk memilih semua dan tiada kemahiran function_javascript

WBOY
Lepaskan: 2016-05-16 16:00:50
asal
1444 orang telah melayarinya

Kawalan Kotak Semak ialah apa yang biasanya kami panggil kotak semak, yang biasanya digunakan untuk menghidupkan atau mematikan pilihan. Kawalan ini ditemui dalam kotak dialog Tetapan kebanyakan aplikasi. Apa yang kita lihat yang boleh disemak ialah Kotak Semak.

Kawalan ini menunjukkan sama ada keadaan tertentu (iaitu pilihan) dipilih (hidup, nilai 1) atau dikosongkan (mati, nilai 0). Gunakan kawalan ini dalam aplikasi anda untuk memberikan pengguna pilihan "Benar/Salah" atau "ya/tidak". Oleh kerana Kotak Semak berfungsi secara berasingan antara satu sama lain, pengguna boleh memilih sebarang bilangan Kotak Semak pada masa yang sama untuk menggabungkan pilihan.

Kotak Semak JS melaksanakan fungsi memilih semua dan menyahpilih semua Ia sangat mudah, hanya masukkan fungsi js kecil. . .

<script language="javascript">
 function  cli(Obj)
 {
 var collid = document.getElementByIdx_x("all")
 var coll = document.getElementsByName(Obj)
 if (collid.checked){
   for(var i = 0; i < coll.length; i++)
    coll[i].checked = true;
 }else{
   for(var i = 0; i < coll.length; i++)
    coll[i].checked = false;
 }
 }
 </script>
Salin selepas log masuk

Di bawah ialah satu set kod html kotak semak Kotak Semak
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称');"> 全选
<input name='多选项名称' type='checkbox' value='' > A
<input name='多选项名称' type='checkbox' value='' > B
<input name='多选项名称' type='checkbox' value='' > C
<input name='多选项名称' type='checkbox' value='' > D
<input name='多选项名称' type='checkbox' value='' > E
<input name='多选项名称' type='checkbox' value='' > F
Salin selepas log masuk

Baiklah, anda boleh menyalin kod di atas, mengubah suai dan mengujinya. . .

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan