//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. asp.net core 错误定位 & vs2017 远程调试部署在centos上的asp.net core程序

        前言 程序运行中会出现各种BUG. 排除BUG有三种方式. 一.访问页面直接报错误信息 出于安全,服务器是关闭这个功能的.在centos上可以用 命令设置环境变量来解决:   export A ...

  2. Python-常用模块1

    今天我们来看一看python中的常用的模块,内容有点多,我会分两天来更新这些知识 一.什么是模块 模块就是我们把装有特定功能的代码就行归类的结果,从代码编写的单位来看我们的程序,从小到大的顺序:一条代 ...

  3. (转) AJAX POST&跨域 解决方案 - CORS

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免 ...

  4. 08_zookeeper的客户端工具curator_watcher

    [使用usingWatcher()] //两个usingWatcher的传入参数不同 public interface Watchable<T> { T watched(); T usin ...

  5. Windows 8 Metro风格颜色表-Metro colours

    http://huaban.com/pins/538986818

  6. 数据结构----线性表顺序和链式结构的使用(c)

    PS:在学习数据结构之前,我相信很多博友也都学习过一些语言,比如说java,c语言,c++,web等,我们之前用的一些方法大都是封装好的,就java而言,里面使用了大量的封装好的方法,一些算法也大都写 ...

  7. ES6入门——数值的扩展

    1.二进制和八进制表示法 ES6提供了二进制和八进制数值的新的写法,分别用前缀0b或0B和0o或0O表示. 2.Number.isFinite(),Number.isNaN() ES6在Number对 ...

  8. 从数据库读取数据后将其输出成html标签

    最常用的方法,使用JS或JQ JQ: $("#div").html("<span>我是HTML代码</span>"); JS: var ...

  9. 使用jxls技术导入Excel模版数据(转自其他博客)

    第一步:先确定好Excel导入的格式以及各表格字段值的含义 第二步:定义好解析的XML--videoConfig.xml <?xml version="1.0" encodi ...

  10. 「资料/转载」HTML标签英文单词对照表

    <!--> / 注释 <!DOCTYPE> document type 文档类型 <a> anchor 超链接 <abbr> abbreviation ...