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 ...
随机推荐
- ajax方法XHR.readyState五种状态与示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ajax与jsonp
1.ajax的概念 AJAX = Asynchronous Javascript And XML (AJAX = 异步 javascript 和 xml) AJAX是一种无需重新加载整个网页的 ...
- 把getJson() 设置为同步执行
因为业务需求,需要在获取到json 数据后,对数据进行处理. 这时候,我们需要把getJson() 的方法设置为同步 $.ajaxSettings.async = false; getJson() 方 ...
- MySQL数据库(5)----删除或更新已有行
有时候,会需要删除某些行,或者修改其内容.这是候便需要用到DELETE语句和UPDATE语句. 1. DELETE 语句的基本格式如下所示: DELETE FROM tbl_name WHERE wh ...
- 【Machine Learning】监督学习、非监督学习及强化学习对比
Supervised Learning Unsupervised Learning Reinforced Learning Goal: How to apply these methods How t ...
- springmvc中配置RESTful风格控制器
一般的http请求中其实只需要get和post就可以满足项目需求了,而为什么还要使用restful可能就是为了使请求url看起来更加直观,好看吧.. restful常用的请求方式:get,post,p ...
- C++ Deque(双向队列)
C++ Deque(双向队列)是一种优化了的.对序列两端元素进行添加和删除操作的基本序列容器.它允许较为快速地随机访问,但它不像vector 把所有的对象保存在一块连续的内存块,而是采用多个连续的 ...
- [问题记录]cocos2dx编译打包apk过程&问题记录
目录: 1. 入门 2. 编译 3. 问题 4. 总结 5. 参考 ------------------------------------------------------------------ ...
- centos无法用password登录,只能用public key的解决办法
如上图只能用public key登录,只是我在17年申请的阿里云免费体验半年的服务器上遇到的, 那么我们用阿里云后台的远程连接按钮进入服务器,进入后 就看/etc/ssh/sshd_config文件配 ...
- yii2.0查询关联数据以及widgets小部件
怎样去查询关联数据呢,接下来整理一个简单的代码: