ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルでチェックボックスを使用する方法の簡単な例のデモンストレーション
javascript_javascript スキルでチェックボックスを使用する方法の簡単な例のデモンストレーション
- WBOYオリジナル
- 2016-05-16 15:31:441366ブラウズ
小さな例を示します。ショッピング カートで、選択した製品を確認すると、対応する価格が表示されます。
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;
}
}
追加: 「すべて選択」a7baf0d00ee0ffd7105ebf8b9ce77d4a で関数を呼び出すと、同じ名前のオブジェクトの場合は、すべてのチェック ボックスのステータスを [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");
}
概要:
1). これは主に、チェックボックスを選択した後、対応するコンテンツを取得する方法を指します
2) 同じグループに属している場合は、チェック ボックスの属性に name="mm" 属性を一貫して記述する必要があります。
var names=document.getElementsByName("mm"); これを使用して、checked を操作してチェックボックスまたはラジオボタンの状態を設定または取得するかどうかを取得できます。 次に、それらを 1 つずつ合計します3).すべての設定を選択します。同様に、document.getElementsByName でオブジェクト配列を取得し、true
を 1 つずつ支払います
1 つが選択されていない場合は、すべて選択ボタンを selected=false に設定し、マーカーを使用して区別します。マーカーが変化しない場合は、どれも選択されていないことを意味します (この文は少し複雑です。よく考えてください）。上記では、JavaScript のチェックボックスの使い方を詳しく紹介していますので、ぜひ学習してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。