Rumah > hujung hadapan web > tutorial js > JS melaksanakan pemilihan kotak semak Kotak Semak, tiada pemilihan atau tiada kemahiran pemilihan function_javascript

JS melaksanakan pemilihan kotak semak Kotak Semak, tiada pemilihan atau tiada kemahiran pemilihan function_javascript

WBOY
Lepaskan: 2016-05-16 15:16:24
asal
1825 orang telah melayarinya

Kawalan Kotak Semak 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.

CheckBox JS melaksanakan fungsi memilih semua, bukan memilih, dan tidak memilih semua Kandungan khusus adalah seperti berikut

Perkara:

  • 1 Dapatkan elemen
  • 2 Pilih semua, nyahpilih, terbalikkan pemilihan dan tambah acara klik
  • 3. Gunakan untuk kotak pilihan gelung
  • 4 Set ditandai dalam kotak pilihan kepada benar untuk memilih semua
  • 5 Set ditandai dalam kotak pilihan kepada palsu untuk menyahpilih
  • .

  • kod html:


kod js:
 <input type="button" value="全选" id="sele"/>
  <input type="button" value="不选" id="setinterval"/>
  <input type="button" value="反选" id="clear"/>
   <div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>
Salin selepas log masuk


Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.
<script>
window.onload=function(){

var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}



}
</script>
Salin selepas log masuk
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