Rumah > hujung hadapan web > tutorial js > js untuk melaksanakan pilihan penuh kotak semak, tiada pemilihan dan kemahiran javascript_pilihan songsang

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.

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