Rumah  >  Artikel  >  hujung hadapan web  >  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
WBOYasal
2016-05-16 15:16:241802semak imbas

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>


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>
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