javascript_javascript スキルでチェックボックスを使用する方法の簡単な例のデモンストレーション-jsチュートリアル-php.cn

javascript_javascript スキルでチェックボックスを使用する方法の簡単な例のデモンストレーション

WBOY

リリース： 2016-05-16 15:31:44

オリジナル

1375 人が閲覧しました

小さな例を示します。ショッピングカートで、選択した製品を確認すると、対応する価格が表示されます。
1. まず、対応するインターフェースを表示します:

関連コード:

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

ログイン後にコピー

注: チェックボックスで、それらが同じグループに属している場合、チェックボックスの属性に同じように記述する必要があります。これは、ラジオ内で選択した項目を横断するのに便利です。 name="mm" も記述する必要があります。同じグループに属する場合に区別できるように、同じ設定になります。
2. すべてのボタン設定を選択します

関連コード:

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

ログイン後にコピー

追加: 「すべて選択」で関数を呼び出すと、同じ名前のオブジェクトの場合は、すべてのチェックボックスのステータスを [checked=true] に設定します。
3. すべての状態が選択されたら、すべてを選択し、自動的に選択します
コードの実装:

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. 表示ボタンをクリックした後、関数を呼び出します

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

ログイン後にコピー