當前位置：
首頁 >
JS实战 · 复选框全选操作
發布時間：2023/12/2
40
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS实战 · 复选框全选操作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
思路： 1、獲取被選中checkbox，通過checked屬性的狀態完成； 2、獲取被選中的checkbox的value值； 3、求所有value的和sum； 4、定義span區域存儲和sum； 代碼如下： <html> <head> ? ? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ? ? <title>表單組件：全選操作</title> ? ? <script type="text/javascript"> ? ? ? ? function checkAll(index){ ? ? ? ? ? ? var node = document.getElementsByName("all")[index]; ? ? ? ? ? ? var items = document.getElementsByName("item"); ? ? ? ? ? ? for(var i=0; i<items.length; i++){ ? ? ? ? ? ? ? ? items[i].checked = node.checked; ? ? ? ? ? ? } ? ? ? ? } ? ? </script> </head> <body> ? ? <p></p> ? ? <input type="checkbox" name="all" οnclick="checkAll(0)"/>全選<br/> ? ? <input type="checkbox" name="item" value="100"/>商品1<br/> ? ? <input type="checkbox" name="item" value="100"/>商品2<br/> ? ? <input type="checkbox" name="item" value="100"/>商品3<br/> ? ? <input type="checkbox" name="item" value="100"/>商品4<br/> ? ? <input type="checkbox" name="item" value="100"/>商品5<br/> ? ? <input type="checkbox" name="item" value="100"/>商品6<br/> ? ? <input type="checkbox" name="all" οnclick="checkAll(1)"/>全選 </body> </html> 代碼如下： <html> <head> ? ? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ? ? <title>購物車顯示選中購買物品的總金額</title> ? ? <script type="text/javascript"> ? ? ? ? function checkAll(index){ ? ? ? ? ? ? var node = document.getElementsByName("all")[index]; ? ? ? ? ? ? var items = document.getElementsByName("item"); ? ? ? ? ? ? for(var i=0; i<items.length; i++){ ? ? ? ? ? ? ? ? items[i].checked = node.checked; ? ? ? ? ? ? } ? ? ? ? } ? ? ? ? function getSum(){ ? ? ? ? ? ? var items = document.getElementsByName("item"); ? ? ? ? ? ? var sum = 0; ? ? ? ? ? ? for(var i=0; i<items.length; i++){ ? ? ? ? ? ? ? ? if(items[i].checked){ ? ? ? ? ? ? ? ? ? ? sum += parseInt(items[i].value); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? /*獲取單個節點用getElementById ? ? ? ? ? ? ? 獲取節點數組用getElementsById ? ? ? ? ? ? ?*/ ? ? ? ? ? ? var spanNode = document.getElementById("sum"); ? ? ? ? ? ? var str = sum + "元"; ? ? ? ? ? ? spanNode.innerHTML = str.fontsize(8); ? ? ? ? } ? ? </script> </head> <body> ? ? <br/> ? ? <input type="checkbox" name="all" οnclick="checkAll(0)"/>全選<br/> ? ? <input type="checkbox" name="item" value="105"/>商品1<br/> ? ? <input type="checkbox" name="item" value="214"/>商品2<br/> ? ? <input type="checkbox" name="item" value="113"/>商品3<br/> ? ? <input type="checkbox" name="item" value="77"/>商品4<br/> ? ? <input type="checkbox" name="item" value="91"/>商品5<br/> ? ? <input type="checkbox" name="item" value="536"/>商品6<br/> ? ? <input type="checkbox" name="all" οnclick="checkAll(1)"/>全選<br/> ? ? <input type="button" value="顯示總金額" οnclick="getSum()"/><span id="sum"></span> </body> </html>
轉載于:https://www.cnblogs.com/panweiwei/p/6158710.html
總結
以上是生活随笔為你收集整理的JS实战 · 复选框全选操作的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS 14正式版或9月16日正式发布！
- 下一篇： Spring对事物的实现