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. ...
随机推荐
- tez是什么？
[Apache Tez是什么?] http://dongxicheng.org/mapreduce-nextgen/apache-tez/ 浅谈Apache Tez中的优化技术 http://dong ...
- Neural Networks for Machine Learning by Geoffrey Hinton （4）
一种能够学习家谱关系的简单神经网络 血缘一共同拥有12种关系: son, daughter, nephew, niece, father, mother, uncle, aunt, brother, ...
- ylbtech-LanguageSamples-Nullable(可以为 null 的类型)
ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Nullable(可以为 null 的类型) 1.A,示例(Sample) 返回顶部 “ ...
- eclipse package explorer视图中怎么让default package不显示？
如下图所示:
- Hive不等值连接
select * from ( select t1.instalment_id as r_id , t2.instalment_id as p_id from (select instalment_i ...
- Android微信支付V3版
由于公司需求做微信APP支付,在集成过程中也遇到各种问题,比如说签名错误,body编码必须为UTF-8.APP端无法调用支付页面直接到支付结果页面.结果为null,code=-1等等: 1.签名错误问 ...
- phpMailer中文说明[转]
A开头: $AltBody--属性出自:PHPMailer::$AltBody文件:class.phpmailer.php说明:该属性的设置是在邮件正文不支持HTML的备用显示 AddAddress- ...
- LoadRunner录制：检查点
LoadRunner怎么request是否执行成功呢?它通过判断服务器返回的HTTP状态码,如果是200 OK,那么VuGen就认为脚本运行通过. 但是很多时候事务执行失败并不一定返回错误的状态码,比 ...
- PKCS7 的 attached 和 detached 方式的数字签名
搜遍了整个网络,都没有详细的说明.只在一个页面上有介绍,还模棱两可的,地址是:http://docs.oracle.com/cd/E19398-01/820-1228/gfnmj/index.html ...
- macOS中安装docker
如官方文档中所说: 1.点击进入boot2docker/osx-installer release页面. 2.在下载页面中点击 Boot2Docker-x.x.x.pkg 来下载 Boot2Docke ...