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 ...
随机推荐
- Python入门-初始面向对象
之前我们代码基本上都是面向过程的,今天我们就来初始一下python中一个重要的内容:面向对象 一.面向对象和面向过程(重点理解) 1.面向过程: 一切以事物的流程为核心. 核心是"过程&qu ...
- ArcEngine交互画线
代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- ...
- Unity --- 关节组件
一.简介 Unity提供了下面的关节组件:铰链关节(Hinge Joint).固定关节(Fixed Joint).弹簧关节(Spring Joint).角色关节(Character Joint).可配 ...
- 【Udacity】数据的集中程度:众数、平均数和中位数
重视Code Review 极致--目标是成为优秀的开发者 Data tells a story!(数据会讲故事) 分析过程对于建模非常的重要,可以帮助我们减少实际上不相关的特征被错误的加入到模型中, ...
- golang闭包
http://blog.51cto.com/speakingbaicai/1703229 https://www.jianshu.com/p/fa21e6fada70 所谓闭包就是一个函数" ...
- Oracle案例06—— OGG-01098 Could not flush "./dirdat/e1000004383" (error 28, No space left on device)
一.前言 自从换了新环境,各种问题层出不穷,如果不是之前积累的经验丰富,估计都歇菜了,看来作为数据库全栈工程师(oracle/mysql/sqlserver/sap hana/pg/mongodb/r ...
- 关于windows server 里Let's Encrypt续订的问题
引言 Let's Encrypt是什么就不详细说了,它是免费的https证书,优点就是免费,缺点就是每三个月就要自己续上.今天主要介绍的是续上有效期的环节. 1.安装certify 下载地址: htt ...
- DevExpress.XtraGrid
DevExpress.XtraGrid控件使用 该控件类是一个表格控件,但是其具有很多方便而使用的功能,例如可以对记录进行分组,可以再记录的前面加上checkbox,可以将具有相同值的cell 进行合 ...
- C/C++内存泄露检测
以下测试基于的gcc版本: gcc (Ubuntu 4.8.4-2ubuntu1~14.04) 4.8.4Copyright (C) 2013 Free Software Foundation, In ...
- 电脑断电后Everything部分文件搜索不到的解决办法
常规检查:查看选项→索引→NTFS,确认所有分区都[包含到数据库],确认后,再删除数据库文件,点击[强制重建] 下面方法是亲身经历,是断电造成的,费了不少时间才解决,现分享出来: 断电后,Everyt ...