cari

Rumah >hujung hadapan web >tutorial js >Contoh demonstrasi mudah tentang cara menggunakan kotak semak dalam kemahiran javascript_javascript

Contoh demonstrasi mudah tentang cara menggunakan kotak semak dalam kemahiran javascript_javascript

WBOY
WBOYasal
2016-05-16 15:31:441401semak imbas

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>

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

Tambahan: Apabila memanggil fungsi dalam Select Alla7baf0d00ee0ffd7105ebf8b9ce77d4a, 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; 
    } 
   }

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"); 
     
   }

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.

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
Artikel sebelumnya：7 pemalam peta diperibadikan berdasarkan Jquery dan html5_jqueryArtikel seterusnya：7 pemalam peta diperibadikan berdasarkan Jquery dan html5_jquery

Artikel berkaitan

Lihat lagi