分别用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 ...
随机推荐
- C C++源代码安全分析工具调研
C C++源代码安全分析工具调研:http://blog.csdn.net/testing_is_believing/article/details/22047107
- Java双向链表实现
public class DoublyLinkList { private class Data{ private Object obj; private Data left = null; priv ...
- 关于JSP异常的处理
jsp中错误处理页面-isErrorPage="true" 举例说明:mustBeError.jsp <%@ page contentType="text/html ...
- Linux源码的目录结构
Linux用来支持各种体系结构的源代码包含大约4500个C语言程序,存放在270个左右的子目录下,总共大约包含200万行代码,大概占用58MB磁盘空间. 源代码所有在目录:/usr/src/linu ...
- Navicate DataModel 注册码
注册信息: 姓 名:ttrar.com 组 织:(空) 序列号:NAVD-6CLM-6BKA-5TXK 内容来自: 可视化数据库设计工具(Navicat Data Modeler)1.0. ...
- HTML5与CSS3基础教程第八版学习笔记1~6章
第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...
- jqgrid项目使用记录/注释版/未整理/
jqgrid项目使用笔记function loadActData(){ $("#actGridTable").clearGridData();//首先清空表格内容 var url ...
- HTML兼容总结
所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+h ...
- createjs 使用记录
createjs由几个库组成: l,easeljs,这个是核心,包括了显示列表.事件机制: 2,preloadjs,用于预加载图片等: 3,tweenjs,用于控制元件的缓动: 4,soundjs,用 ...
- JQuery 性能优化
一.合适的选择器 JQuery 选择器提供丰富的选择器来定位DOM元素, 基本选择器 #id..class.element.*等:那他们哪个更高效呢? 第一选择: $("#id") ...