在公司实际开发中，会经常遇到复选框全选、多选、统计选中个数的情况，所以总结研究了一些大神的帖子，汇总学习一下！
1.统计被选中复选框的个数
2.点击复选框，执行对应函数
3.获取复选框的状态
4.全选、取消全选动作
1.利用原生JS代码
1）统计被选中复选框的个数
checkbox要是属于同一组的，在复选框的属性内name=”mm”属性要写一致；这样可以通过下面代码获得同一组复选框
var names = document.getElementsByName("mm"); //根据name获取一组内的所有复选框
var count = 0;
for(var i=0; i<names.length; i++) {
if(names[i].checked) { //获取复选框的状态，被选中时，该值为true
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(){
//备注：addEventListener只能和getElementById（）函数绑在一起用，若改为getElementsByName()会报错
var check_text = document.getElementById('category');
//addEventListener()方法可以避免在html代码中内嵌 js方法
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,否则为false4)全选、取消全选动作
下面是一个完整的html测试文件，本例子中，用到了 less.js 来编译css文件，建议还没有接触过less的同学，了解一下less编码，非常简单易学而且高效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试checked用法</title>
<!--引入 less 样式表-->
<link rel="stylesheet/less" type="text/css" href="./public/css/less-js-checkbox.less">
<!-- 引入less样式文件 -->
<script>less = {env : 'development'}</script>
<script type="text/javascript" src="./public/js/less.js"></script>
<script>less.watch();</script>
</head>
<body>
<!--<input type="checkbox" name="category" value="今日话题" id="category"/>今日话题-->
<!-- div块，显示整个checkbox表 -->
<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>
<!-- 全选框、取消全选框 -->
<!-- checkbox列表 -->
<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);
}
//选择所有items
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;
//div块级显示
.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;
}
//checkbox列表行
.list_row {
height: 30px;
padding: 3px 10px;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
