jQuery入门简单实现反选与全选
//html代码
<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input type="button" value="反选" id= 'agnSel'> <div id="wrap_input_box" >
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
<input type="checkbox">全选与反选$<br>
</div>
// jquery代码
var oInput = $('#wrap_input_box>input[type=checkbox]')
var btn = $("#all");
btn.click(function(){
if(this.checked){
for(var i = 0 ; i<oInput.length;i++){
oInput[i].checked = true;
}
}else{
for(var i = 0 ; i<oInput.length;i++){
oInput[i].checked = false;
}
}
})
// jquery绑定函数的方式 实际上就是给他包含的每一个dom对象都绑定了此事件
oInput.click(function(){
var flag = true;
oInput.each(function(){
//当前的是否没有被选中 如果每一个都选了 那么这个flag值 将会不会改变
if(!this.checked){
flag = false;
}
});
console.log(flag);
if(flag){
btn.attr('checked',true);
}else{
btn.attr('checked',false);
}
}) //反选
$('#agnSel').click(function(){ for(i=0;i<oInput.length;i++){
oInput[i].checked= oInput[i].checked? false:true;
}
})
jQuery入门简单实现反选与全选的更多相关文章
- vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- Day14 Javascript 点击添加出弹窗,取消隐藏弹窗小练习 反选,全选,取消边框
点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- jquery checkbox选中状态以及实现全选反选
jquery1.6以下版本获取checkbox的选中状态: $('.ck').attr('checked'); $('.ck').attr('checked',true);//全选 $('.ck'). ...
- 简单的js反选,全选,全不选
<html> <head> <base href="<%=basePath%>"> <title>My JSP 'che ...
- vue 选择之单选,多选,反选,全选,反选
1.单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选. <li v-for="(item,index) in r ...
- jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)
1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
随机推荐
- JavaScript 二维数组排列组合2
<html> <head> <title>二维数组排列组合</title> </head> <body> <div id= ...
- easyui numberbox 输入框禁止输入
{ field: 'Amount', title: '金额', width: 80, editor: { type: 'numberbox', options: { disabled: true, p ...
- Linux基础之-网络配置,主机名设置,ssh登陆,scp传输
一. 网络配置修改 1.临时修改(ip,dns,netmask,gateway) 临时修改网络配置,只要没有涉及到修改配置文件的,在network服务重启后,所有设置失效 2.永久修改(ip,dns, ...
- Oracle中用户和方案的区别
从定义中我们可以看出方案(Schema)为数据库对象的集合,为了区分各个集合,我们需要给这个集合起个名字,这些名字就是我们在企业管理器的方案下看到的许多类似用户名的节点,这些类似用户名的节点其实就是一 ...
- .Net程序员应该掌握的正则表达式
Regular Expression Net程序员必然要掌握正则的核心内容:匹配.提取.替换.常用元字符. 正则表达式是用来进行文本处理的技术,是语言无关的,在几乎所有语言中都有实现. 常用元字符 . ...
- asmlinkage的作用
本文转载自:http://blog.chinaunix.net/uid-24945116-id-83893.html 学习啦! asmlinkage是个宏,使用它是为了保持参数在stack中.因为从汇 ...
- Linux命令 标签: linux 2016-08-01 10:26 508人阅读 评论(0) 收藏
Linux常用命令 文件.目录的基本操作 ls - 查看文件 cp - 拷贝文件 mv - 移动或重命名文件 rm - 删除文件 touch - 创建空文件或更新文件时间 cd - 改变当前路径 pw ...
- ppt中调整图片位置
按方向键时,如果调整的位置过大,可以使用 Ctrl + 方向键.
- Makefile 实例
CROSS_COMPILE = HI_CFLAGS= -Wall -O2 -g -march=armv7-a -mcpu=cortex-a9 -mfloat-abi=softfp -mfpu=vfpv ...
- Python深入学习之《Fluent Python》 Part 1
Python深入学习之<Fluent Python> Part 1 从上个周末开始看这本<流畅的蟒蛇>,技术是慢慢积累的,Python也是慢慢才能写得优雅(pythonic)的 ...