recherche

Maison >interface Web >js tutoriel >Exemple de démonstration simple de la façon d'utiliser la case à cocher dans les compétences javascript_javascript

Exemple de démonstration simple de la façon d'utiliser la case à cocher dans les compétences javascript_javascript

WBOY
WBOYoriginal
2016-05-16 15:31:441368parcourir

Montrez un petit exemple : dans le panier, nous pouvons vérifier les produits que nous choisissons, puis les prix correspondants peuvent être affichés.
1. Affichez d'abord l'interface correspondante :

Codes associés : 

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

Remarque : Dans la case à cocher, s'ils appartiennent au même groupe, l'attribut name="mm" doit être écrit de la même manière dans les attributs de la case à cocher ; il sera pratique de parcourir les éléments sélectionnés dans la radio, name="mm" doit également être écrit. Les paramètres sont les mêmes afin de pouvoir les distinguer les uns des autres s'ils appartiennent au même groupe.
2. Sélectionnez tous les paramètres des boutons


Codes associés : 

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

Supplémentaire : Lors de l'appel de la fonction dans Select Alla7baf0d00ee0ffd7105ebf8b9ce77d4a, elle parcourra toutes les fonctions avec le Objet du même nom, définissez le statut de toutes les cases à cocher sur vérifié=true.
3. Lorsque tous les états sont sélectionnés, sélectionnez tout et sélectionnez automatiquement
Mise en œuvre du code : 

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. Appelez la fonction après avoir cliqué sur le bouton d'affichage 

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

Résumé :
1) Il s'agit principalement de l'application des cases à cocher. Après avoir coché la case, comment obtenir le contenu correspondant

2). S'ils appartiennent au même groupe, l'attribut name="mm" doit être écrit de manière cohérente dans les attributs de la case à cocher

var names=document.getElementsByName("mm"); Vous pouvez utiliser ceci pour savoir si elle est cochée ou non. Appelez la valeur à utiliser pour définir ou obtenir l'état de la case à cocher ou du bouton radio. Puis additionnez-les un par un

3).Sélectionnez tous les paramètres. De même, obtenez le tableau d'objets via document.getElementsByName, puis payez true

un par un

Quand l'un d'entre eux n'est pas sélectionné, nous définissons le bouton Sélectionner tout sur vérifié=false ; et utilisons des marqueurs pour le distinguer. Si les marqueurs ne changent pas, cela signifie qu'aucun d'entre eux n'est désélectionné (cette phrase est un peu alambiquée, veuillez y réfléchir attentivement).

Ce qui précède présente en détail comment utiliser la case à cocher en javascript. Tout le monde est invité à apprendre.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：7 plug-ins de cartes personnalisés basés sur Jquery et html5_jqueryArticle suivant：7 plug-ins de cartes personnalisés basés sur Jquery et html5_jquery

Articles Liés

Voir plus