在公司实际开发中，会经常遇到复选框全选、多选、统计选中个数的情况，所以总结研究了一些大神的帖子，汇总学习一下！
1.统计被选中复选框的个数
2.点击复选框，执行对应函数
3.获取复选框的状态
4.全选、取消全选动作
1.利用原生JS代码
1）统计被选中复选框的个数
checkbox要是属于同一组的，在复选框的属性内name=”mm”属性要写一致；这样可以通过下面代码获得同一组复选框
var names = document.getElementsByName("mm");
var count = 0;
for(var i=0; i<names.length; i++) {
if(names[i].checked) {
count++;
}
//以下是一个完整的测试代码
<html>
<head>
<title>测试复选框checkbox</title>
<script>
function static_num()
{
document.getElementById("btnOperate").onclick = function () {
var arr = new Array();
var items = document.getElementsByName("category");
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arr.push(items[i].value);
}
}
alert("选择的个数为：" + arr.length);
};
};
</script>
</head>
<body>
<p><input type="checkbox" name="category" value="今日话题" />今日话题 </p>
<p><input type="checkbox" name="category" value="视觉焦点" />视觉焦点</p>
<p><input type="checkbox" name="category" value="财经" />财经</p>
<p><input type="checkbox" name="category" value="汽车" />汽车</p>
<p><input type="checkbox" name="category" value="科技" />科技</p>
<p><input type="checkbox" name="category" value="房产" />房产</p>
<p><input type="checkbox" name="category" value="旅游" />旅游</p>
<p><input id="btnOperate" type="button" value="选择" onclick="static_num()" /></p>
</body>
</html>
2).点击复选框，执行对应函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试checked用法</title>
</head>
<body>
<input type="checkbox" name="category" value="今日话题" id="category"/>今日话题
<script type="text/javascript">
window.onload = function(){
var check_text = document.getElementById('category');
check_text.addEventListener("click", function () {
if(check_text.checked) {
alert("您已成功选择" + check_text.value);
} else {
alert("取消选择" + check_text.value);
}
});
};
</script>
</body>
</html>
3).获取复选框的状态
如上面两个例子所述，可以通过如下代码，获取多选框状态
items.checked //被选中时值为true,否则为false
4)全选、取消全选动作
下面是一个完整的html测试文件，本例子中，用到了 less.js 来编译css文件，建议还没有接触过less的同学，了解一下less编码，非常简单易学而且高效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试checked用法</title>
<link rel="stylesheet/less" type="text/css" href="./public/css/less-js-checkbox.less">
<script>less = {env : 'development'}</script>
<script type="text/javascript" src="./public/js/less.js"></script>
<script>less.watch();</script>
</head>
<body>
<div class="show_box">
<div class="header_row">
<label for="fruit"><input type="checkbox" name="fruit" id="fruit" value="水果"/>水果</label>
</div>
<div class="list_row">
<label for="apple"><input type="checkbox" name="fruit-items" id="apple" value="苹果"/>苹果</label>
</div>
<div class="list_row">
<label for="banana"><input type="checkbox" name="fruit-items" id="banana" value="香蕉"/>香蕉</label>
</div>
<div class="list_row">
<label for="strawberry"><input type="checkbox" name="fruit-items" id="strawberry" value="草莓"/>草莓</label>
</div>
<div class="list_row">
<label for="peach"><input type="checkbox" name="fruit-items" id="peach" value="桃子"/>桃子</label>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
var fruit = document.getElementById('fruit');
fruit.addEventListener('click', selectAllItems);
fruit.addEventListener('click', undoAllItems);
var fruitItems = document.getElementsByName('fruit-items');
for(var i=0; i<fruitItems.length; i++) {
fruitItems[i].addEventListener('click', itemsSelectParent);
}
function selectAllItems() {
if( fruit.checked) {
var fruitItems = document.getElementsByName('fruit-items');
for(var i=0; i<fruitItems.length; i++) {
if(!fruitItems[i].checked) {
fruitItems[i].checked = true;
}
}
}
}
function undoAllItems() {
if( !fruit.checked) {
var fruitItems = document.getElementsByName('fruit-items');
for(var i=0; i<fruitItems.length; i++) {
if(fruitItems[i].checked) {
fruitItems[i].checked = false;
}
}
}
}
function itemsSelectParent() {
var fruit = document.getElementById('fruit');
var fruitItems = document.getElementsByName('fruit-items');
var childStatus = true;
for(var i=0; i<fruitItems.length; i++) {
childStatus = (childStatus && fruitItems[i].checked);
}
if(childStatus) {
fruit.checked = true;
} else {
fruit.checked = false;
}
}
};
</script>
</body>
</html>
下面是less样式表的文件：
@base-font: 16px;
@big-font: 20px;
@border: 1px;
@bg-color: #FFF8E1;
@header-bg-color: #F4565E;
@header-btn-color: #FDE330;
@checked-color: #FEE531;
.show_box {
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
border: @border*2 solid @bg-color;
background-color: @bg-color;
font-size: @base-font;
.header_row {
height: 28px;
padding: 3px 10px;
position: relative;
font-size: @big-font;
background-color: @header-bg-color;
}
.list_row {
height: 30px;
padding: 3px 10px;
}
}
本文转载自
http://www.cnblogs.com/kaituorensheng/p/4529113.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
