//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入门简单实现反选与全选的更多相关文章

  1. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  2. springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  3. Day14 Javascript 点击添加出弹窗,取消隐藏弹窗小练习 反选,全选,取消边框

    点击添加出弹窗,取消隐藏弹窗小练习 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  5. jquery checkbox选中状态以及实现全选反选

    jquery1.6以下版本获取checkbox的选中状态: $('.ck').attr('checked'); $('.ck').attr('checked',true);//全选 $('.ck'). ...

  6. 简单的js反选,全选,全不选

    <html> <head> <base href="<%=basePath%>"> <title>My JSP 'che ...

  7. vue 选择之单选,多选,反选,全选,反选

    1.单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选. <li v-for="(item,index) in r ...

  8. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  9. 11.8 开课二个月零四天 (Jquery取属性值,做全选,去空格)

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. 07_Redis事务

    [简述] 事务是指一系列的操作步骤,着一些列的操作步骤,要么完全地执行,要不完全地不执行. 比如微博中: A用户关注了B用户,那么A的关注列表里就会有B用户,B用户的粉丝列表里就会有A用户. 这个关注 ...

  2. as3.2版本中中jar生成方法

    lintOptions { abortOnError false } task makeJar(type: Copy) { //删除存在的 delete 'build/libs/myjar.jar' ...

  3. C语言函数指针(指向函数的指针)

    转载:http://c.biancheng.net/cpp/html/3248.html 一个函数总是占用一段连续的内存区域,函数名在表达式中有时也会被转换为该函数所在内存区域的首地址,这和数组名非常 ...

  4. idea 多项目部署JRebel

    碰到个问题,Jrebel热部署Idea,两个项目一个可以热部署,一个不行.刚开始发现是其中一个项目没有添加JRebel,于是加上 然而发现还是不行,继续google, 在一篇文章里面发现如下的内容: ...

  5. Android学习——文件存储

    在Andriod开发中,文件存储和Java的文件存储类似.但需要注意的是,为了防止产生碎片垃圾,在创建文件时,要尽量使用系统给出的函数进行创建,这样当APP被卸载后,系统可以将这些文件统一删除掉.获取 ...

  6. Gitlab命令行简单使用

    使用Gitlab拉取远程文件到本地,然后再创建新分支的流程: git clone url   #将远程分支拉取到本地: git status / git branch #查看git的状态和分支情况,g ...

  7. Log4j的配置文件

    附:Log4j比较全面的配置 Log4j配置文件实现了输出到控制台.文件.回滚文件.发送日志邮件.输出到数据库日志表.自定义标签等全套功能. log4j.rootLogger=DEBUG,consol ...

  8. 设计模式:观察者(Observer)模式

    设计模式:观察者(Observer)模式 一.前言   观察者模式其实最好的名称应该是“发布订阅”模式,和我们现在大数据之中的发布订阅方式比较类似,但是也有区别的地方,在上一个设计模式,我们学习的是仲 ...

  9. 常用的邮箱服务器(SMTP、POP3)地址、端口

    sina.com: POP3 服务器地址:pop3.sina.com.cn(端口:110) SMTP 服务器地址:smtp.sina.com.cn(端口:25) sinaVIP: POP3 服务器:p ...

  10. Java日志系统

    前言 各组件之间的关系: slf4j是The Simple Logging Facade for Java的简称,是一个简单日志门面抽象框架,它本身只提供了日志Facade API和一个简单的日志类实 ...