分别用js和jq实现百度全选反选效果
2016-06-04 16:29
471 查看
js实现过程
jq的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
height: 30px;
line-height:30px;
list-style: none;
font-size: 24px;
}
.b1 {
background: #CCCCCC;
}
.b2 {
background: yellow;
}
.b3 {
background: orange;
}
.b4 {
background: red;
}
</style>
<script>
/*
* 当鼠标移入li的时候
* 当前li对应的checkbox是否是选中的
* 是：li的className = 'b4'
* 否：li的className = 'b3'
* 当鼠标移出li的时候
* 当前li对应的checkbox是否是选中的
* 是：li的className = 'b4'
* 否：li的className = 原来隔行变色的时候设置的class
* */
window.onload = function() {
var ul1 = document.getElementById('ul1');
var lis = document.querySelectorAll('li');
var checkBoxes = ul1.querySelectorAll('input');
var checkAll = document.getElementById('checkAll');
//给每一个li添加不同的样式
for (var i=0; i<lis.length; i++) {
lis[i].index = i;
checkBoxes[i].index = i;
//通过i%2判断i是奇数还是偶数
if ( i % 2 == 0 ) {
lis[i].className = 'b1';
lis[i].bc = 'b1';
} else {
lis[i].className = 'b2';
lis[i].bc = 'b2';
}
//当鼠标移入的时候
lis[i].onmouseover = function() {
if ( checkBoxes[this.index].checked == true ) {
this.className = 'b4';
} else {
this.className = 'b3';
}
}
//当鼠标移出的时候
lis[i].onmouseout = function() {
if ( checkBoxes[this.index].checked == true ) {
this.className = 'b4';
} else {
this.className = this.bc;
}
}
checkBoxes[i].onclick = function() {
if ( this.checked == true ) {
lis[this.index].className = 'b4';
}
var isCheckedAll = true;
for (var i=0; i<checkBoxes.length; i++) {
//console.log(checkBoxes[i].checked)
if (checkBoxes[i].checked == false) {
isCheckedAll = false;
}
}
console.log(isCheckedAll)
checkAll.checked = isCheckedAll;
}
}
//全选
checkAll.onclick = function() {
for (var i=0; i<checkBoxes.length; i++) {
checkBoxes[i].checked = this.checked;
if (this.checked) {
lis[i].className = 'b4';
} else {
lis[i].className = lis[i].bc;
}
}
}
}
</script>
</head>
<body>
<div id="ul1">
<li><input type="checkbox"> javascript</li>
<li><input type="checkbox"> html</li>
<li><input type="checkbox"> css</li>
<li><input type="checkbox"> html5</li>
<li><input type="checkbox"> css3</li>
<li><input type="checkbox"> nodejs</li>
</div>
<input type="checkbox" id="checkAll">全选
</body>
</html>jq的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//高版本的jq库有个bug。低版本的jq中是可以的
$(function(){
var chkAll = $('#chkAll');
var chkNone = $('#chkNone');
var chkReverse = $('#chkReverse');
var checkbox = $('#checkbox>:checkbox');
console.log(checkbox);
chkAll.click(function(){
//checkbox.attr('checked','checked');
checkbox.attr('checked',true);
});
chkNone.click(function(){
//checkbox.removeAttr('checked');
checkbox.attr('checked',false);
});
chkReverse.click(function(){
checkbox.each(function(){
$(this).attr('checked',!$(this).attr('checked'));
});
});
});
</script>
</head>
<body>
<div id="checkbox">
<input type="checkbox" name="" id="" checked="checked">吃
<input type="checkbox" name="" id="">喝
<input type="checkbox" name="" id="">玩
<input type="checkbox" name="" id="">乐
<input type="checkbox" name="" id="">打豆豆
</div>
<div id="btn">
<input type="button" id="chkAll" value="全选">
<input type="button" id="chkNone" value="全不选">
<input type="button" id="chkReverse" value="反选">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 