今天要来写一个关于checkbox全选的问题,早上帮同学做了个例子,发现我对于这里面还是很混乱的,所以要做一个例子合集来提醒自己一下。
分为两种 一种是直接使用checkbox 一种是使用背景图片
checkbox
<input type="checkbox" id="All" />
<div class="other" id="otherBox">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
这是我的结构
第一种 jq写法
现在来写行为,引入的是jquery-1.12.3.js这个版本的jQuery
// 这个是全选的按钮 判断如果全选勾选那么其他的input都需要勾选 如果取消 则剩下的input都取消
$('#All').click(function() {
if($(this).is(":checked")) {
$('.other').children('input').each(function() {
$(this).prop("checked", true);
})
} else {
$('.other').children('input').each(function() {
$(this).prop("checked", false);
})
}
})
// 这个是单个勾选 其实可以不用再写出来 但是我为了判断当我全部勾选时 全选也会自动被勾上
$('.other').children('input').on('click', function() {
if($(this).is(":checked")) {
$(this).prop("checked", true);
judge();
} else {
$(this).prop("checked", false);
judge();
}
});
// 这是为了判断是否全部勾选所做的一个函数
function judge() {
$('.other').children('input').each(function() {
if($(this).is(':checked')) {
$('#All').prop("checked", true);
} else {
$('#All').prop("checked", false);
}
})
}
第二种 JS写法
// 这里开始获取ID名
var All = document.getElementById('All');
var otherBoxs = document.getElementById('otherBox').children;
// 全选
All.onclick = function() {
if(All.checked) {
for(var i = 0 ; i < otherBoxs.length; i++) {
otherBoxs[i].checked = true;
}
} else {
for(var i = 0 ; i < otherBoxs.length; i++) {
otherBoxs[i].checked = false;
}
}
}
var checkLen = 0;
// 单选
for(var i = 0; i < otherBoxs.length; i++) {
otherBoxs[i].onclick = function(num) {
return function() {
if(otherBoxs[num].checked) {
checkLen++;
judge();
} else {
checkLen--;
judge();
}
}
}(i);
}
// 判断
function judge() {
if(checkLen == otherBoxs.length) {
All.checked = true;
} else {
All.checked = false;
}
}
我用JS写的时候,在单选用了一个闭包,试了一下别的方法,结果没有成功,我觉得用上闭包有点复杂,等以后看一下还有没有更好的办法。
背景图片
其实我觉得相对于checkbox来说,背景图片会较为简单一些,因为只需要用类名转换就可以实现了
先看结构样式
<style type="text/css">
#All {
width: 16px;
height: 16px;
}
.normal {
background: url('../images/b-btn.png');
}
.select {
background: url('../images/b-btn1.png');
}
.other span {
display: block;
width: 16px;
height: 16px;
}
</style>
<div class="normal" id="All"></div>
<div class="other" id="otherBox">
<span class="normal"></span>
<span class="normal"></span>
<span class="normal"></span>
</div>
勾选是select 未勾选为normal
第一种 jq写法
$('#All').on('click', function() {
if($(this).is('.select')) {
$(this).removeClass('select');
$('.other').find('span').removeClass('select');
} else {
$(this).addClass('select');
$('.other').find('span').addClass('select');
}
});
var secArr = [];
$('.other').find('span').on('click', function() {
if($(this).is('.select')) {
$(this).removeClass('select');
secArr.pop('1');
judge();
} else {
$(this).addClass('select');
secArr.push('1');
judge();
}
});
function judge() {
if(secArr.length == $('.other').find('span').length) {
$('#All').addClass('select');
} else {
$('#All').removeClass('select');
}
}
第二种 JS写法
var All = document.getElementById('All');
var otherBoxs = document.getElementById('otherBox').children;
var AllClick = true;
All.onclick = function() {
if(AllClick) {
All.className = "select";
AllClick = false;
for(var i = 0; i < otherBoxs.length; i++) {
otherBoxs[i].className = "select";
}
} else {
All.className = "normal";
AllClick = true;
for(var i = 0; i < otherBoxs.length; i++) {
otherBoxs[i].className = "normal";
}
}
}
var checkLen = 0;
for(var i = 0; i < otherBoxs.length; i++) {
otherBoxs[i].onclick = function() {
if((this.className == "normal")) {
this.className = "select";
checkLen++;
judge();
} else {
this.className = "normal";
checkLen--;
judge();
}
}
}
function judge() {
if(checkLen == otherBoxs.length) {
All.className = "select";
} else {
All.className = "normal";
}
}
其实我觉得不管是用背景图还是checkbox,其中的中心思想都是一样的~
希望以后能有更好的办法!