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. ...
随机推荐
- MFC 带Ribbonbar的窗口 实现全屏和取消全屏
void CMainFrame::FullScreen(){ m_wndRibbonBar.ShowWindow(SW_HIDE);//隐藏工具栏 m_wndStatusBar. ...
- TensorFlow------TFRecords的分析与存储实例
TensorFlow------TFRecords的分析与存储实例: import os import tensorflow as tf # 定义cifar的数据等命令行参数 FLAGS = tf.a ...
- python中在ubuntu中安装虚拟环境及环境配置
python中在ubuntu中安装虚拟环境及环境配置 1.升级python包管理工具pip pip install --upgrade pip 备注:当你想升级一个包的时候 `pip install ...
- 让网页在ie浏览器下以最高版本解析网页
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta ht ...
- web页面内容优化管理与性能技巧
来源:GBin1.com 回 想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪 存文件,里面包含的有视频或者图片 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何添加Scope监控
添加一个Scope YT NC项目 默认添加的就是对Axis_1的监控,位置,速度和加速度都有,可以删除模长的监控(Position modulo) 点击Record就可以记录曲线了(要停止记 ...
- Windows Vista如何让梦幻桌面支持更多格式
Windows Vista 梦幻桌面(DreamScene)到底能不能支持除了Mpeg/mpg以外的格式? 很多人说梦幻桌面的视频格式有限,像AVI.RM.RMVB就不能做成梦幻桌面!也有很多朋友着急 ...
- java中的Annotation
java中包含5个基本的Annotation: @Override @Deprecated @SuppressWarnings @SafeVarargs @FunctionalInterface …… ...
- JavaScript中让元素动态发射指定的事件
var ev = document.createEvent('HTMLEvents'); //动态创建HTML事件 ev.initEvent('abort', false, true); //HTML ...
- js实现全选，全不选，反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...