suchen

Heim >Web-Frontend >js-Tutorial >Einfache Beispieldemonstration zur Verwendung von Kontrollkästchen in Javascript_Javascript-Kenntnissen

Einfache Beispieldemonstration zur Verwendung von Kontrollkästchen in Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:31:441368Durchsuche

Demonstrieren Sie ein kleines Beispiel: Im Warenkorb können wir die von uns ausgewählten Produkte überprüfen und dann die entsprechenden Preise anzeigen.
1. Zeigen Sie zunächst die entsprechende Oberfläche an:

Zugehörige Codes: 

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

Hinweis: Wenn sie zur gleichen Gruppe gehören, muss das Attribut name="mm" in den Attributen des Kontrollkästchens gleich geschrieben werden, um die ausgewählten Elemente im Radio zu durchlaufen. Es muss auch name="mm" geschrieben werden. Die Einstellungen sind gleich, so dass sie voneinander unterschieden werden können, wenn sie zur gleichen Gruppe gehören.
2. Wählen Sie alle Tasteneinstellungen aus


Zugehörige Codes: 

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

Zusätzlich: Wenn Sie die Funktion in „Alle auswählena7baf0d00ee0ffd7105ebf8b9ce77d4a aufrufen, werden alle Funktionen mit durchlaufen Wenn Sie ein gleichnamiges Objekt verwenden, setzen Sie den Status aller Kontrollkästchen auf „checked=true“.
3. Wenn alle Staaten ausgewählt sind, wählen Sie alle aus und wählen Sie automatisch aus
Code-Implementierung: 

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. Rufen Sie die Funktion auf, nachdem Sie auf die Schaltfläche „Ansicht“ geklickt haben 

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

Zusammenfassung:
1) Dies bezieht sich hauptsächlich auf die Verwendung von Kontrollkästchen, um den entsprechenden Inhalt zu erhalten

2). Wenn sie zur gleichen Gruppe gehören, muss das Attribut name="mm" konsistent in die Attribute des Kontrollkästchens geschrieben werden;

var name=document.getElementsByName("mm"); Sie können damit ermitteln, ob es aktiviert ist oder nicht, um den Status des Kontrollkästchens oder Optionsfelds festzulegen oder nicht. Dann addieren Sie sie nacheinander

3).Wählen Sie alle Einstellungen aus. Rufen Sie auf ähnliche Weise das Objektarray über document.getElementsByName ab und zahlen Sie dann nacheinander true

Wenn einer nicht ausgewählt ist, setzen wir die Schaltfläche „Alle auswählen“ auf „checked=false“ und verwenden Markierungen, um ihn zu unterscheiden. Wenn sich die Markierungen nicht ändern, bedeutet dies, dass keiner von ihnen nicht ausgewählt ist (dieser Satz ist etwas kompliziert). Bitte denken Sie sorgfältig darüber nach).

Das Obige führt ausführlich in die Verwendung von Kontrollkästchen in Javascript ein. Jeder ist herzlich eingeladen, es zu lernen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：7 personalisierte Karten-Plug-ins basierend auf Jquery und html5_jqueryNächster Artikel：7 personalisierte Karten-Plug-ins basierend auf Jquery und html5_jquery

In Verbindung stehende Artikel

Mehr sehen