當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JS实战 · 复选框全选操作
生活随笔
收集整理的這篇文章主要介紹了
JS实战 · 复选框全选操作
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
思路： 1、獲取被選中checkbox，通過checked屬性的狀態(tài)完成； 2、獲取被選中的checkbox的value值； 3、求所有value的和sum； 4、定義span區(qū)域存儲(chǔ)和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>購(gòu)物車顯示選中購(gòu)買物品的總金額</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); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? ? ? /*獲取單個(gè)節(jié)點(diǎn)用getElementById ? ? ? ? ? ? ? 獲取節(jié)點(diǎn)數(shù)組用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>
轉(zhuǎn)載于:https://www.cnblogs.com/panweiwei/p/6158710.html
總結(jié)
以上是生活随笔為你收集整理的JS实战 · 复选框全选操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS 14正式版或9月16日正式发布！
- 下一篇： lightoj1145 【DP优化求方案