如果要在所有的选项都被选中后，全选的选项自动被选上，该怎么实现？
来源：2-8 编程练习
qq_烟火里的尘埃_0
2015-12-26 16:48
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body {
padding: 20px;
}
li {
float: left;
margin: 20px;
}
#total {
clear: both;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 获取元素
var all = document.getElementById('all');
var list = document.getElementById('list');
var inputs = list.getElementsByTagName('input');
var total = document.getElementById('total');
// 计算已选项的总数
function showTotal(){
var selected = 0 ;
for (var i = 0 ; i<inputs.length;i++){
if(inputs[i].checked){
selected += 1 ;
}
total.innerHTML = '已选：'+ selected+ '项';
}
}
// 全选事件
all.onchange = function () {
for (var i = 0 ; i<inputs.length;i++){
inputs[i].checked = all.checked;
showTotal();
}
};
// 每个选项的事件
for (var i = 0; i<inputs.length; i++) {
inputs[i].onchange = function () {
showTotal();
if (!this.checked) {
all.checked = false;
}
};
}
}
</script>
</head>
<body>
<div><label><input id="all" type="checkbox"/>全选</label></div>
<ul id="list">
<li><label><input type="checkbox"/>选项1</label></li>
<li><label><input type="checkbox"/>选项2</label></li>
<li><label><input type="checkbox"/>选项3</label></li>
<li><label><input type="checkbox"/>选项4</label></li>
<li><label><input type="checkbox"/>选项5</label></li>
<li><label><input type="checkbox"/>选项6</label></li>
</ul>
<div id="total">已选：0 项</div>
</body>
</html>
写回答
关注
3回答
-
- 李晓健
- 2015-12-26 22:08:07
function showTotal(){ var selected = 0 ; for (var i = 0 ; i<inputs.length;i++){ if(inputs[i].checked){ selected += 1 ; } total.innerHTML = '已选：'+ selected+ '项'; } //如果选中项的个数等于所有项的个数就说明全部选中了 if(selected == inputs.length){ all.checked = true; }else{ all.checked = false; } }这个方法里加一个判断就行了
-
- 慕粉2135579427
- 2017-04-20 15:38:08
在showTotal函数最后加上return function(){return selected}
-
- 狂飙的蜗牛_1
- 2015-12-26 22:07:48
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body { padding: 20px; } li { float: left; margin: 20px; } #total { clear: both; } </style> <script type="text/javascript"> window.onload = function () { // 获取元素 var all = document.getElementById('all'); var list = document.getElementById('list'); var inputs = list.getElementsByTagName('input'); var total = document.getElementById('total'); var selected = 0 ; // 计算已选项的总数 function showTotal(){ for (var i = 0 ; i<inputs.length;i++){ if(inputs[i].checked){ selected += 1 ; } total.innerHTML = '已选：'+ selected+ '项'; } } // 全选事件 all.onchange = function () { for (var i = 0 ; i<inputs.length;i++){ inputs[i].checked = all.checked; showTotal(); } }; // 每个选项的事件 for (var i = 0; i<inputs.length; i++) { inputs[i].onchange = function () { selected=0;//归零 showTotal(); console.log(selected); if(selected>=6){ all.checked = true; }else{ all.checked = false;//必须 } } } } </script> </head> <body> <div><label><input id="all" type="checkbox"/>全选</label></div> <ul id="list"> <li><label><input type="checkbox"/>选项1</label></li> <li><label><input type="checkbox"/>选项2</label></li> <li><label><input type="checkbox"/>选项3</label></li> <li><label><input type="checkbox"/>选项4</label></li> <li><label><input type="checkbox"/>选项5</label></li> <li><label><input type="checkbox"/>选项6</label></li> </ul> <div id="total">已选：0 项</div> </body> </html>
用JS实现购物车特效
通过JavaScript实现类似淘宝网络购物车功能效果
43236 学习 · 167 问题
相似问题