分别用js和jq实现百度全选反选效果
js实现过程
<!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>
分别用js和jq实现百度全选反选效果的更多相关文章
- Jquery 1.8全选反选删除选中项实现
JQuery1.6以后,Prop的出现,让1.6以下的全选反选效果全部失效了.以下是修正后的版本: 全选反选效果: $(".checkbox").click(function () ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- JS全选反选功能
总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...
- js全选 反选
// 全选 反选 allChoose: function (o) { var obj = $.extend(true, { id: "#id", name: "name& ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- java中public等权限问题和final的使用
1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...
- Tomcat服务器启动常见问题
参考:http://www.cnblogs.com/xdp-gacl/p/3729033.html 学习web开发,需要先安装一台web服务器,然后再在web服务器中开发相应的web资源,供用户使用浏 ...
- [转].net 调用oracle存储过程返回多个记录集
本文转自:http://www.netwinform.com/articleinfo.aspx?id=17 存储过程: CREATE OR REPLACE PROCEDURE p_query_cs ( ...
- [转]ODBC连接ORACLE数据库的设置
本文转自:http://www.cppblog.com/edog/articles/1420.html 首先安装Oracle,以Oracle 817为例,作为ODBC开发者的客户端,才能使用Oracl ...
- msp430f149的低功耗模式
430的低功耗确实很强啊,虽然和VR单片机比起来速度慢了好多.在CPU进行工作时,如果没有什么事情干,就得进入低功耗模式啦,LMPX(0~4)这几种模式的具体事项就是如下的,得记住了. 一,运行模式M ...
- C语言的变量的作用域和生存期
一.c程序存储空间布局 C程序一直由下列部分组成: 1)正文段——CPU执行的机器指令部分:一个程序只有一个副本:只读,防止程序由于意外事故而修改自身指令: 2)初始化数据段(数据段)——在 ...
- PHP之会话控制小结
会话控制是一种跟踪用户的通信方式,使用会话控制主要基于以下几点:由于http协议的无状态性,使得不能通过协议来建立两次请求之间的关联:对于通常的页面之间的数据传递方式get和post而言,主要处理参数 ...
- SQL Server 2012 内存管理 (memory management) 改进
SQL Server 2012 的内存管理和以前的版本相比,有以下的一些变化. 一．内存分配器的变化 SQL Server 2012以前的版本,比如SQL Server 2008 R2等, 有sing ...
- bootstrap 的 datetimepicker 结束时间大于开始时间
web的时间js控件,在管理性的项目中频繁用到,总结了一些用到的知识,分享出来,供以后学习: 1.首先引用资源包: bootstrap基础资源包: bootstrap.min.css .bootstr ...
- Switch的表达式的要求
在java中switch后的表达式的类型只能为以下几种:byte.short.char.int(在Java1.6中是这样),在java1.7后支持了对string的判断.