Jquery学习笔记（4）--checkbox全选反选
可能有浏览器兼容性，注意html里的checked是一个属性，存在就默认选中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='jquery.js'></script>
</head>
<body>
<p><input type="checkbox">篮球</p>
<p><input type="checkbox">唱歌</p>
<p><input type="checkbox">旅游</p>
<p><input type="checkbox">美食</p>
<input type="button" value="全选" name="all">
<input type="button" value="全不选" name="none">
<input type="button" value="反选" name="reverse"> </body>
<script>
//这个地方在谷歌浏览器有问题，点全不选后再点全选没有效果，ie里面没问题。
//checked在html里面是一个属性，不管checked=''里面是啥，都会默认选中。
$('[name=all]').click(function(){
$('p input').attr({'checked':true});
});
$('[name=none]').click(function(){
$('p input').removeAttr('checked',false);
});
$('[name=reverse]').click(function(){
$('p input').each(function(){
//这里使用js的this对象，checked是一个属性
this.checked = !this.checked;
});
});
</script>
</html>
修改后，chrome也可以用了：
<script>
//这个地方在谷歌浏览器有问题，点全不选后再点全选没有效果，ie里面没问题。
//checked在html里面是一个属性，不管checked=''里面是啥，都会默认选中。
$('[name=all]').click(function(){
//jqery负责遍历，js的this改变checked的true和false
$('p input').each(function(){
this.checked = true;
});
});
$('[name=none]').click(function(){
//同上
$('p input').each(function(){
this.checked = false;
}); });
$('[name=reverse]').click(function(){
$('p input').each(function(){
//这里使用js的this对象，checked是一个属性
// alert(!this.checked);
this.checked = !this.checked;
});
});
</script>
</html>
再次改进，使用prop()方法，专门修改固有属性，比如checked：
<script>
$('[name=all]').click(function(){
$(':checkbox').prop('checked',true);
});
$('[name=none]').click(function(){
$(':checkbox').prop('checked',false);
});
$('[name=anti]').click(function(){
$(':checkbox').each(function(){
var isTrue = !$(this).prop('checked');
// alert(isTrue);
$(this).prop('checked',isTrue);
});
});
</script>
Jquery学习笔记（4）--checkbox全选反选的更多相关文章
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery数组之存放checkbox全选值示例代码
使用jquery数组可以存放checkbox全选值,下面有个不错的示例,感兴趣的朋友可以参考下. 复制代码代码如下: <input type="checkbox" id=&q ...
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 关于Winform下DataGridView中实现checkbox全选反选、同步列表项的处理
近期接手一个winform 项目,虽然之前有.net 的经验,但是对一些控件的用法还不是很熟悉. 这段时间将会记录一些在工作中遇到的坎坷以及对应的解决办法,写出来与大家分享并希望大神提出更好解决方法来 ...
- jQuery使用prop设置checkbox全选、反选
$(function(){ var checkbox = $("input[type='checkbox']"); //全选 $('#select-all' ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
- JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...
- jquery checkbox 全选反选代码只能执行一遍，第二次就失败
遇到问题背景: 在写到购物车的全选交互的时候,商品选中的状态只有在第一次的时候可以,第二次就无法选中:(代码如下) $(".chooseall").click(function() ...
- checkbox 全选反选实现全代码
//跳转到指定action function validateForm(url){ if($("#form").form('validate')){ var x=document. ...
随机推荐
- 【Linux】apt-get install 怎么阻止弹出框，使用脚本默认自动安装？
You can do a couple of things for avoiding this. Setting the DEBIAN_FRONTEND variable to noninteract ...
- Maven+TestNG+ReportNG/Allure接口自动化测试框架初探（上）
转载:http://www.51testing.com/html/58/n-3721258.html 由于一直忙于功能和性能测试,接口自动化测试框架改造的工作被耽搁了好久.近期闲暇一些,可以来做点有意 ...
- JMeter 十：录制脚本--使用bodboy
1. 下载bodboy 下载地址:http://www.badboy.com.au/download 这里填写完基本信息,点击下方的Continue即可跳转到下载页面. 任选一个version,点击后 ...
- seo关键字优化
SEO 第一: 标题关键字分析 分析和选择行业热门的关键字,并合理的应用于网站标题内及分布到各栏目页面和内页. 其实个人觉得标题.内容.以及与内容相关性链接必须要足.还有就是出现的层次感,例如: a) ...
- STL源代码剖析 容器 stl_map.h
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie map ------------------------------------------ ...
- JSP语法学习笔记
1.修改JSP页面模版:找到MyEclips安装目录,搜索“Jsp.vtl”,找到该文件修改编码,以及一些不需要用到的代码. 2.查找项目生成的Servlet文件路径:查看当前项目父级目录搜索 .me ...
- 学习EF之CodeFirst二（数据库对应映射）
在上一篇文章我们简单通过一个实例完成对CodeFirst的理解,我们通过实体生成数据库里的表和字段,虽然有一些默认的配置生成规定,但其实我们可以能过对实体进一步控制从而对生成的表字段进行更加符合我们要 ...
- AMQP && MQTT comparision
1. AMQP (Advanced Message Queuing Protocol) 2. MQTT (Message Queuing Telemetry Transport) Introducti ...
- 零样本学习 - （Zero shot learning，ZSL）
https://zhuanlan.zhihu.com/p/41846072 https://zhuanlan.zhihu.com/p/38418698 https://zhuanlan.zhihu.c ...
- VUE详解
渐进式框架 声明式渲染(无需关心如何实现).组件化开发.客户端路由(vue-router).大规模的数据状态(vuex).构建工具(vue-cli) 全家桶:vue.js+vue-router+vue ...