jq实现全选、全不选、反选
基本思路:
1全选:点击全选按钮的时候,将input的属性checked设置为true;
2全不选:点击全不选按钮的时候,将input的属性checked设置为false;
3反选:点击反选按钮的时候,提取出当前转态的时候,已经被选中的input的索引值,然后将被选中的按钮的属性checked设置为false;没有被选中使一样的道理;
注意:想要获取到input的checked不能用attr应该用prop;checked为true的时候input被选中,checked为false的时候input未被选中;
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<label>全选</label><input type="checkbox" class="allclick"/>
<label>全不选</label><input type="checkbox" class="allnoclick"/>
<label>反选</label><input type="checkbox" class="noclick"/>
<div class="box">
<input type="checkbox" data-click="yes"/>
<input type="checkbox" data-click="yes"/>
<input type="checkbox" data-click="yes"/>
<input type="checkbox" data-click="yes"/>
</div>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
//全选 只是针对全选
$(".allclick").click(function(){
var mark=$(".allclick").prop("checked");
if(mark==true){
$(".box input").prop("checked",true);
}
});
//全不选 只是针对全不选中
$(".allnoclick").click(function(){
var mark=$(".allnoclick").prop("checked");
if(mark==true){
$(".box input").prop("checked",false);
}
});
//反选
$(".noclick").click(function(){
$(".box input").each(function(i){
var mark=$(".box input").eq(i).prop("checked");
if(mark==true){//已经被选中
$(".box input").eq(i).prop("checked",false);
}else if(mark==false){//没有被选中
$(".box input").eq(i).prop("checked",true);
}
});
}); });
</script>
</body>
</html>
jq实现全选、全不选、反选的更多相关文章
- Jq 遍历 全选 全不选 反选
//全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery 全选 全不选 反选
1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- JS实现全选、不选、反选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js实现全选/全不选、反选
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用jQuery实现全选-全不选-反选的功能
临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利 古人云:学而时习之,不亦说乎. 学习后经常温习所学的知识,也是件令人愉悦的 ...
随机推荐
- node express 304 avoid
method 1 Why do I need this? The right answer is: I don’t need that trick! The example below is just ...
- cPage分页,asp.net自定义分页,url传值分页,支持datalist、gridview、Repeater等
asp.net分页是最最常用的功能,实现方式也很多,使用不同的控件有不同的分页方式. 下面分享一个我们团队内部使用了多年的一个分页控件cPage,是自己设计编写,没有冗余,简单.快速. cPage,现 ...
- Shiro权限框架简单快速入门
声明本文只适合初学者,本人也是刚接触而已,经过一段时间的研究小有收获,特来分享下希望和大家互相交流学习. 首先配置我们的web.xml代码如下: <filter> <filter-n ...
- bzoj1091: [SCOI2003]切割多边形
Description 有一个凸p边形(p<=8),我们希望通过切割得到它.一开始的时候,你有一个n*m的矩形,即它的四角的坐标分别为(0,0), (0,m), (n,0), (n,m).每次你 ...
- TinyHTTP代码核心流程
TinyHTTPd是一个超轻量型Http Server,使用C语言开发,全部代码不到600行 研究HTTP服务器,为了更好的造轮子,看了TinyHTTPd代码,对逻辑处理画个简单流程图(不含底层)
- [zz]Maya C++ API Programming Tips
Maya C++ API Programming Tips source : http://wanochoi.com/?page_id=1588 How to handle the multiple ...
- My Tornado Particle Effect
These animations are more able to demostrate this plugin than the following static images. :) test 1 ...
- Run Loop详解
Run loops是线程的基础架构部分.一个run loop就是一个事件处理循环,用来不停的调配工作以及处理输入事件.使用run loop的目的是使你的线程在有工作的时候工作,没有的时候休眠. Run ...
- 在UIView上添加tableView设置代理属性
- Java Docs
1 Java Docs on Oracle: 1.1 Online(EN): JavaSE6 http://docs.oracle.com/javase/6/docs/api/index.htm ...