分别用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 ...
随机推荐
- JS类型（2）_JS学习笔记（2016.10.02）
undefined undefined是全局对象(window)的一个特殊属性,其值是未定义的.但 typeof undefined 返回 'undefined' . 虽然undefined是有特殊含 ...
- iOS 导航控制器如何随意push和pop 想要在 A push B 后， B 在push 到 D ，然后从 D pop 到 C ,在从 C pop 的A
这里主要是对导航控制器的viewControllerss这个数组进行操作,因为push操作和pop操作都是根据这个数据去切换控制器或者在这个数组里增加控制器的,所以只要改变这个子控制器数据就能自定义切 ...
- Linux系统搭建负载均衡环境
1:负载均衡的定义多台服务器组成一个集群,向外提供相同的服务,所有的请求经过apache服务器的分配,到各台tomcat服务器处理请求.另外还需实现session共享,如果有一台tomcat服务器宕机 ...
- 关于Git的stash命令
add 添加新文件到 Git 代码仓库的索引中 $ git add filename mv 移动或重命名文件 $ git mv old-filename new-filename rm 从工作目录和 ...
- dirname(__FILE__) 的使用总结
dirname(__FILE__) php中定义了一个很有用的常数,即 __file__ 这个内定常数是当前php程序的就是完整路径(路径+文件名). 即使这个文件被其他文件引用(include或re ...
- 【转载】Spark SQL之External DataSource外部数据源
http://blog.csdn.net/oopsoom/article/details/42061077 一.Spark SQL External DataSource简介 随着Spark1.2的发 ...
- webview中java与js交互
WebView提供了在Android应用中展示网页的强大功能.也是目前Hybird app的大力发展的基础.作为Android系统的一个非常重要的组件,它提供两方面的强大的能力:对HTML的解析,布局 ...
- vi删除多行，替换，复制
VI中的多行删除与复制 法一: 单行删除,:1(待删除行)d 多行删除 ,:1,10d 法二: 光标所在行,dd 光标所在行以下的N行,Ndd 方法1: 光标放到第6行, 输入:2yy 光标放到第9行 ...
- System.Web.Mvc.Html 命名空间小计(转)
最近在看MVC框架,发现这个博文对初学者可能有帮助,故转之. 1,Html.Action 使用指定参数调用指定子操作方法并以 HTML 字符串形式返回结果. Html.Action() < ...
- plsql导入导出表
原来总是直接 tools->import talbes->Oracle Import结果发现有的时候会出错:有的表不能正确导入, baidu+googel解决办法如下: 导出步骤: 1 t ...