JS实现购物车全选多选按钮功能
Posted qiaowanze
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现购物车全选多选按钮功能相关的知识，希望对你有一定的参考价值。
对于JS初学者来说，一个完整的购物车实现还是挺难的，逻辑功能挺多。写出完整功能，能提升不少JS基础，下面实现购物车全选多选按钮功能：
首先html及CSS部分：
<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部分：
<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>
全部代码：
<!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>
效果如下：
以上是关于JS实现购物车全选多选按钮功能的主要内容，如果未能解决你的问题，请参考以下文章