js untuk melaksanakan pilihan penuh kotak semak, tiada pemilihan dan kemahiran javascript

js untuk melaksanakan pilihan penuh kotak semak, tiada pemilihan dan kemahiran javascript_pilihan songsang

WBOY

Lepaskan： 2016-05-16 16:15:09

asal

1258 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan pilihan penuh, bukan pilihan dan pilihan songsang kotak pilihan dalam js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Idea:

1. Dapatkan elemen

2. Tambahkan acara klik untuk memilih semua, nyahpilih atau pilihan songsang

3. Gunakan untuk kotak pilihan gelung

4. Tetapkan dalam kotak semak kepada benar untuk memilih semua

5. Tetapkan kotak pilihan yang ditandakan kepada palsu untuk menyahpilihnya

6. Melalui jika penghakiman, jika ditanda adalah benar dan keadaan yang dipilih ditetapkan, ditetapkan ditandakan kepada palsu dan tidak dipilih Jika ditanda adalah palsu dan tidak dipilih, tetapkan ditandakan kepada benar dan dipilih.

2. Kod HTML:

<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

3. Kod js:

<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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.