分别用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 ...
随机推荐
- 你真的会用UIButton吗? UIButton详细介绍
本节知识点: 什么是UIButton UIButton的状态 UIButton的属性设置 UIButton基本使用步骤 UIButton的代码创建与常用属性设置 重写按钮的某个状态属性的 setter ...
- HTTPS证书制作
openssl 安装可参照之前文章 1.mkdir /etc/ssl/xip.ioopenssl genrsa -out /etc/ssl/xip.io/xip.io.key 1024openssl ...
- C++之类的析构函数
一.认识析构函数 在我的前一篇博客介绍了类的构造函数.http://www.cnblogs.com/MrListening/p/5557114.html. 这里我们来简单说说类的析构函数,它是类的一个 ...
- 滚动新闻插件vticker
vTicker 是一款非常小巧的 jQuery 垂直滚动插件,压缩后只有 2KB.vTicker 支持自定义滚动时间.间隔时间.显示个数.滚动方向(向上/向下).容器高度等等,但它对 HTML 结构有 ...
- job interview
一 , 7series clock 二, SDRAM comtroller (DDR) 4.熟悉DDR2/3协议或Ethernet相关协议,并有实际项目经验者优先: 三,AXI bus(AMBA) 四 ...
- Sql的实际应用
sql实际应用-递归查询 1.既然要谈到sql,数据库表是必须的 2.数据结构 3.获取某个节点的所有子节点 传统的写法(sql2000) 很麻烦,暂且就不写了 来看看 ...
- win32项目设置窗口全屏
创建窗口的时候设置样式:CreateWindow(,,WS_MAXIMIZE,……): 显示窗口的时候设置:ShowWindow(hWnd,SM_MAXIMIZE);
- VBA文件处理
Option Explicit ' ▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽ ' Excel对象 ' △△△△△△△△△△△△△△△△△△ ' Open Public Function FileOpen_ ...
- Podfile 文件的编写
# Uncomment this line to define a global platform for your projectplatform :ios, '9.0' target 'Cocoa ...
- 17_高级映射：一对一查询（使用resultType）
[数据库模型] [各个表] [ 用户表user ] 购买商品的用户信息. [ 订单表 ] 用户所创建的订单 [ 订单明细表 ] 订单的详细信息,即购买商品的信息 [ 商品表 ] 商品的具体信息 [有关 ...