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. ...
随机推荐
- Qt 5.7 亮瞎眼的更新
Qt 5.7的beta版已经出来了,这将是一个超级重大的更新,主要有几个商业版的模块在GPLv3 open source 版的用户也可以用了,其中包括了两个很炫酷的模块: Qt Charts Qt D ...
- 【实践】用 js 封装java shuffle函数（打乱数组下标方法）
此方法返回的会是一个全新的数组 所以并不会像java里的shuffle函数一样返回一个引用一样的数组 思路如下: 1.新建一个函数传入需要打乱下标的数组 2.获取数组的长度 3.新建一个用来保存并且返 ...
- JavaScript的String对象
1.创建String对象 Html标签的格式编排方法:可以将String对象的字符串内容输出成对应的html标签. 示例: var str = "JavaScript程序设计"; ...
- C#秘密武器之委托
在C#的世界里,委托是无处不在,尤其在.NET自己封装的框架里到处都有其身影,所以掌握委托就很有必要了!那什么是委托呢?其实委托就是一种数据类型,跟int等东东差不多,只不过在使用时要自己先去构建一个 ...
- 解决安装完Ubuntu系统后启动项中没有Ubuntu的问题
问题出现的原因是你没有把grub安装到硬盘的起始扇区里,按理说Ubuntu在安装的时候应该能很好的处理这个问题,但有个别电脑还是会出问题.不过我们可以通用命令解决 问题. 使用U盘进入Ubuntu系统 ...
- vue - dist
描述:打包后准备上线的文件(需要服务器环境才能运行!!!)
- chromedriver Capabilities & ChromeOptions
Capabilities are options that you can use to customize and configure a ChromeDriver session. This pa ...
- recess----2.Controller里面取用request信息
事实上,第一个APP里面除了没有model,其它的都有用过了,但是需要单独拎出来看看清楚. Recess框架里面的controller就是一个典型的MVC框架的controller,它负责处理从浏览器 ...
- hibernate EJBQL QBC QBE
在功能方面是本地SQL>HQL>EJBQL>QBC>QBE 假想一个BBS. 板块: package com.bjsxt.hibernate; import javax ...
- Python之print详解
Python之print详解 http://www.jb51.net/article/55768.htm print的一些基本用法,在前面的讲述中也涉及一些,本讲是在复习的基础上,尽量再多点内容. ...