Contoh demonstrasi mudah tentang cara menggunakan kotak semak dalam kemahiran javascript

Contoh demonstrasi mudah tentang cara menggunakan kotak semak dalam kemahiran javascript_javascript

WBOY

Lepaskan： 2016-05-16 15:31:44

asal

1374 orang telah melayarinya

Tunjukkan contoh kecil: dalam troli beli-belah, kita boleh menyemak produk yang kita pilih, dan kemudian harga yang sepadan boleh dipaparkan.
1. Mula-mula paparkan antara muka yang sepadan:

Kod berkaitan:

<body> 
  商品列表：<br/> 
  笔记本电脑<input type="checkbox" name="mm" value="3000" onclick="chose(this)" />3000 
  台式机<input type="checkbox" onclick="chose(this)" name="mm" value="2900"/> 2900 
  路由器<input type="checkbox" onclick="chose(this)" name="mm" value="90"/> 90 
  <br/> 
  家常用品<input type="checkbox" onclick="chose(this)" name="mm" value="500"/>500 
  洗衣机<input type="checkbox" onclick="chose(this)" name="mm" value="5600"/> 5600 
  <br/>全选<input type="checkbox" name="all" onclick="allCheck(this)" /> 
  <br/><input type="button" value="查看金额" name="btn" onclick="sumall()"/> <span id="spanid"></span> 
   
 </body>

Salin selepas log masuk

Nota: Dalam kotak pilihan, jika mereka tergolong dalam kumpulan yang sama, atribut name="mm" mesti ditulis sama dalam atribut kotak pilihan adalah mudah untuk melintasi item yang dipilih dalam radio, name="mm" juga mesti ditulis Tetapan adalah sama supaya mereka boleh dibezakan antara satu sama lain jika mereka tergolong dalam kumpulan yang sama.
2. Pilih semua tetapan butang

Kod berkaitan:

function allCheck(node1){ 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     node[x].checked=node1.checked; 
    } 
   }

Salin selepas log masuk

Tambahan: Apabila memanggil fungsi dalam Select All, ia akan merentasi semua fungsi dengan nama yang sama Objek, tetapkan status semua kotak semak kepada checked=true.
3 Apabila semua keadaan dipilih, pilih semua dan pilih secara automatik
Pelaksanaan kod:

function chose(node){ 
    var flag=true;//用于遍历是否是全部变量设置 
    var allM=document.getElementsByName("all")[0]; 
    var node=document.getElementsByName("mm"); 
    for (var x = 0; x < node.length; x++) { 
     if(node[x].checked==false){//只要有一个没选中，就退出遍历，标记设置为false 
      flag=false; 
      break; 
     } 
    } 
    if(flag){ 
     allM.checked=true; 
    }else{ 
     allM.checked=false; 
    } 
   }

Salin selepas log masuk

4. Panggil fungsi selepas mengklik butang lihat

function sumall(){ 
    var sum=0; 
    var names=document.getElementsByName("mm"); 
    for(var x=0;x<names.length;x++){ 
     if(names[x].checked){//选中的全部加起来 
      sum=sum+parseInt(names[x].value);//将选中的值解析出来 
     } 
    } 
    document.getElementById("spanid").innerHTML=("总和为 "+sum+" 元").fontcolor("red"); 
     
   }

Salin selepas log masuk

Ringkasan:
1). Ini terutamanya merujuk kepada penggunaan kotak semak Selepas memilih kotak semak, cara mendapatkan kandungan yang sepadan

2). Jika mereka tergolong dalam kumpulan yang sama, atribut name="mm" mesti ditulis secara konsisten dalam atribut kotak semak

var names=document.getElementsByName("mm"); Anda boleh menggunakan ini untuk mendapatkan sama ada nilai panggilan untuk beroperasi diperiksa untuk menetapkan atau mendapatkan status kotak semak atau butang radio. Kemudian tambahkan satu persatu

3).Pilih semua tetapan. Begitu juga, dapatkan tatasusunan objek melalui document.getElementsByName, dan kemudian bayar benar

satu demi satu

Apabila salah satu tidak dipilih, kami menetapkan butang pilih semua untuk diperiksa=false; dan menggunakan penanda untuk membezakannya Jika penanda tidak berubah, ini bermakna tiada satu pun yang tidak dipilih (ayat ini agak berbelit-belit. sila fikirkan dengan teliti) .

Di atas memperkenalkan secara terperinci cara menggunakan kotak pilihan dalam javascript Semua orang dialu-alukan untuk belajar.