Einfache Beispieldemonstration zur Verwendung von Kontrollkästchen in Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

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

WBOY

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

Original

1366 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

Zusätzlich: Wenn Sie die Funktion in „Alle auswählen 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; 
    } 
   }

Nach dem Login kopieren

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

Nach dem Login kopieren

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.