原生JS实现购物车全选多选按钮功能
对于JS初学者来讲，一个完整的购物车实现仍是挺难的，逻辑功能挺多。写出完整功能，能提高很多JS基础，下面实现购物车全选多选按钮功能：html
首先HTML及CSS部分：this
<style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style> <body> <table> <tr> <td> <label for="allCheck">全选</label><br><input id="allCheck" type="checkbox"> </td> </tr> <tr> <td> <input id="check0" type="checkbox"> </td> </tr> <tr> <td> <input id="check1" type="checkbox"> </td> </tr> <tr> <td> <input id="check2" type="checkbox"> </td> </tr> <tr> <td> <input id="check3" type="checkbox"> </td> </tr> <tr> <td> <input id="check4" type="checkbox"> </td> </tr> </table>
而后是JS部分：spa
<script>
var allcheck = document.getElementById("allCheck") //获取全选框 allcheck.addEventListener("click",clickHandler) //给全选框按钮添加点击属性 for(var i=0;i<5;i++){ var check = document.getElementById("check"+i) //遍历每一个多选按钮 check.addEventListener("click",clickHandler); //给每一个多选框添加点击属性 } function clickHandler(){ if(allcheck === this){ //进行判断 若是你点击的是全选按钮 那么多选按钮也就所有被选中 for(var i=0;i<5;i++){ var check = document.getElementById("check"+i); check.checked = allcheck.checked; } return; //结束 } for(var j=0;j<5;j++){ var checks = document.getElementById("check"+j); if(!checks.checked){ 这一部分代码用来多选按钮是否被选中 遍历全部的多选按钮 若是有一个多选按钮没有被选中 那么全选按钮就不会被选中 allcheck.checked = false; return; //结束 } } allcheck.checked = true; //很差理解 看不懂能够一步一步运行代码
} </script>
所有代码：code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style>
</head>
<body>
<table>
<tr>
<td>
<label for="allCheck">全选</label><br><input id="allCheck" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check0" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check1" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check2" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check3" type="checkbox">
</td>
</tr>
<tr>
<td>
<input id="check4" type="checkbox">
</td>
</tr>
</table>
<script>
var allcheck = document.getElementById("allCheck") allcheck.addEventListener("click",clickHandler) for(var i=0;i<5;i++){ var check = document.getElementById("check"+i) check.addEventListener("click",clickHandler); } function clickHandler(){ if(allcheck === this){ for(var i=0;i<5;i++){ var check = document.getElementById("check"+i); check.checked = allcheck.checked; } return; } for(var j=0;j<5;j++){ var checks = document.getElementById("check"+j); if(!checks.checked){ allcheck.checked = false; return; } } allcheck.checked = true;
} </script>
</body>
</html>
效果以下：htm
相关文章
- 1. 原生JS实现购物车功能
- 2. JS 实现checkbox多选按钮 全选
- 3. 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能
- 4. 购物车全选单选功能实现
- 5. jq实现input全选，反选，所选的value实现购物车的功能
- 6. 1、实现全选/所有选/反选按钮功能
- 7. 原生JS实现购物车结算功能代码+zepto版
- 8. js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码
- 9. 购物车中"加入购物车”按钮的实现
- 10. 原生JS 实现框选功能（Vue）
- 更多相关文章...
- • 使用Redis和Lua的原子性实现抢红包功能 - 红包项目实战
- • jQuery Mobile 按钮 - jQuery Mobile 教程
- • ☆基于Java Instrument的Agent实现
- • 为了进字节跳动，我精选了29道Java经典算法题，带详细讲解
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
