jquery checkbox选中状态以及实现全选反选
jquery1.6以下版本获取checkbox的选中状态:
- $('.ck').attr('checked');
- $('.ck').attr('checked',true);//全选
- $('.ck').removeAttr('checked');//全不选
发现,以上代码,无论input checkbox是选中还是未选中状态,无论IE还是Chrome,返回结果都是undefinded;
查阅发现:jquery1.6版本对此作了修改,checked属性在页面初始化的时候就已经初始化好了,不会随着状态改变而变。也就是说checkbox在页面加载完毕是选中状态,则永远返回checked,如果一开始没被选中,则永远返回undefinded。
jquery1.6及以上版本获取checkbox的选中状态:
- $('.ck').prop('checked');
- $('.ck').prop('checked',true);//选中
- $('.ck').prop('checked', function(i, attr){return !attr;});//反选
突然想到,可以通过反选实现c/s系统中的RadioBox的单选框功能,如下:
- <div>
- <li style="margin: 5px; float: left; min-width:200px;min-height:24px;">
- <input class="ckbox" id="ck_0" type="checkbox" checked /><label for="ck_0">是</label><!--默认选中css样式参考http://www.csscheckbox.com/checkboxes/1/-->
- </li>
- <li style="margin: 5px; float: left; min-width:200px;min-height:24px;">
- <input class="ckbox" id="ck_1" type="checkbox" /><label for="ck_1">否</label>
- </li>
- </div>
JS实现单选控制如下:
- //这儿实现的只针对两个checkbox的情况,多个checkbox自由发挥呗
- $('.ckbox').click(function () {
- $('.ckbox').not($(this)).prop('checked', function (i, attr) { return !attr; });//除自身外反选
- });
效果如下图:
在Jquery 1.6及之后,新加了一个方法prop(),通过attr方法去获得属性,通过prop方法去获得特性。在遇到要获取或设置checked,selected,readonly和disabled等属性时,用prop方法。
官方解释prop():获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么,什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
以下是官方建议attr(),prop()的使用:
Attribute/Property |
.attr() |
.prop() |
accesskey |
√ |
|
align |
√ |
|
async |
√ |
√ |
autofocus |
√ |
√ |
checked |
√ |
√ |
class |
√ |
|
contenteditable |
√ |
|
draggable |
√ |
|
href |
√ |
|
id |
√ |
|
label |
√ |
|
location ( i.e. window.location ) |
√ |
√ |
multiple |
√ |
√ |
readOnly |
√ |
√ |
rel |
√ |
|
selected |
√ |
√ |
src |
√ |
|
tabindex |
√ |
|
title |
√ |
|
type |
√ |
|
width ( if needed over .width() ) |
√ |
jquery checkbox选中状态以及实现全选反选的更多相关文章
- jquery checkbox选中状态
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单的jquery表单验证+添加+删除+全选/反选
//布局 <body> <h4><a href="#">首页</a>><a href="#"> ...
- JQuery 更改属性 JQ对象循环 each 全选反选 三元运算
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- 使用JQuery获取被选中的checkbox的value值 以及全选、反选
以下为使用JQuery获取input checkbox被选中的值代码: <html> <head> <meta charset="gbk"> & ...
- 前端开发学习之——使用jquery/javascript判断及改变checkbox选中状态
一.使用jquery判断及改变checkbox选中状态 1.使用JQuery判断一个checkbox 是否为选中: (1).attr('checked) 看JQuery版本1.6+返回:”checke ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
随机推荐
- 如果Python对于磁盘没有写入权限,还会运行吗?
Python如果对于磁盘没有写入权限,那么编译成功的字节码文件就只会存储在内存当中,而不会写入到磁盘,每次运行Python都会重新编译,然后运行.
- 第一章 Windows编程基础(1~4课)
第一课:从main到WinMain 第二课:窗口和消息 第三课:MFC编程 第四课:MFC应用程序框架 概括: Win32的两种编程框架:SDK方式.MFC方式 1. SDK方式:使用WinMain入 ...
- shiro控制登陆成功后跳回之前的页面
登陆之后跳回之前的页面是在做登陆注册模块时遇到的一个需求,也是很有必要的.若用户直接访问登陆页面,那可以控制它直接到首页,但是要用户没有登陆直接访问自己的购物车等需要经过身份认证的页面,或者因为ses ...
- Ubuntu 基础操作 基础命令 热键 man手册使用 关机 重启等命令使用
. : 关机, 如果将Linux默认运行等级设置为0, 系统将无法启动; -- : 多用户模式, 允许使用网络文件系统, 一般不使用图形界面登陆就是这种模式; -- : 多用户图形界面模式, 该模式下 ...
- JavaScript初探系列之基本概念
JavaScript的核心语言特性在ECMA-262中是以名为ECMAScript(ECMA, EuropeanComputer Manufacturers Association )的伪语言的形式来 ...
- 将代码上传到GitHub
网上看了很多资料,都是用的命令行,比较难看懂,自己摸索了一下怎么样在图形界面上操作.下面记录的只是简单的如何把本地仓库直接上传到服务器上. 在mac上下载个GitHub Mac客户端,安装好后运行,输 ...
- Calculator 2
github地址:https://github.com/YooRarely/object-oriented.git 新增: 计算类(拥有计算功能) 采用符号优先级计算方法 对符号不匹配的如 -2 ,自 ...
- 展示github中的页面(Github Pages)
一.创建一个仓库,名为"user_name.github.io"(此处user_name替换为你自己的github用户名),并在根目录下创建index.html,则该仓库下的所有h ...
- lintcode-143-排颜色 II
143-排颜色 II 给定一个有n个对象(包括k种不同的颜色,并按照1到k进行编号)的数组,将对象进行分类使相同颜色的对象相邻,并按照1,2,...k的顺序进行排序. 注意事项 You are not ...
- caffe2安装教程
相比于网上的安装教程不如直接看官方安装教程:https://caffe2.ai/docs/getting-started.html?platform=windows&configuration ...