ホームページ >ウェブフロントエンド >jsチュートリアル >js は、画像とコードを含むシンプルなショッピング カートを実装します。
図に示すように:
すべて選択ボタンの実装は次のとおりです:
<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> <input type="checkbox" name="all" onclick="checkAll()" />全选<br /> <input type="button" value="获取总金额" onclick="getSum()" /> <span id="sum"></span>
最後のspanタグは、合計金額を表示する領域を格納するために使用されます。
2 つの「すべて選択」関数を実装するコードは次のとおりです:
function checkAll() { //var allNode = document.getElementsByName("all")[0]; //获取被点击的元素 var allNode = event.srcElement; var item = document.getElementsByName("item"); for(var x=0;x<item.length;x++) { item[x].checked = allNode.checked; } }
event.srcElement は、応答イベント ボタンの取得を実装します。
for ループは、各複数選択ボックスの selected 属性を変更します。
合計金額の計算方法は次のとおりです:
function getSum() { var item = document.getElementsByName("item"); var sum = 0; for(var x=0;x<item.length;x++) { if(item[x].checked) { sum+=parseInt(item[x].value); } } var spanNode = document.getElementById("sum"); spanNode.innerHTML = (sum+"元").fontsize(7); }
選択されたすべてのチェックボックスの値を加算します。
画像とコードを含むシンプルなショッピング カートの JS 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
関連記事:
jsonとCookieをベースにしたショッピングカート実装のjQueryメソッド