复选框之checked属性
今天无意中看到同事在学习复选框里面的checked属性的应用,当时看了一下,感觉熟悉而又陌生,发现checked属性其实还是挺奇怪的,感觉这里很有必要做一下笔记:
1、html中的checked属性。仔细研究下会发现一个很怪异的现象。

你知道上面这四个复选框到底那些被选中了?那些没被选中吗?
其实乍一看我也不知道结果,运行完后也想不通为什么,查看资料才发现确实是那样的。
结果是:

其实原理是这样的,复选框里只要有checked属性,不管是否为其赋值,结果为空或true或false或任意值,均为选中状态。
2、利用javascript操作checked来控制复选框是否选中。

结果:

要使其不选中,即设置checked属性值为false。
3.利用jQuery操作checked来控制复选框选中与否。

结果第一个复选框选中。
相反的,checked属性值设为false就是未选中了
这里需注意:
无论是用javascript还是jQuery来操作checked属性,其值均为true或false,切忌带引号,否则会出错。
补充:获取复选框是否选中问题:
例如,有这样一个例子,我要获取这三个复选框是否选中:
<input type="checkbox" name="checkbox1" id="checkbox1" checked>看书
<input type="checkbox" name="checkbox2" id="checkbox2">电影
<input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山
在js中,我们可以这样来写:
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
console.log(checkbox1.checked); // true
console.log(checkbox2.checked) // false
console.log(checkbox3.checked) // true
在jQuery中,可以这样获取:
$(function(){
console.log($("#checkbox1").attr('checked')) // checked
console.log($("#checkbox2").attr('checked')) // undefined
console.log($("#checkbox3").attr('checked')) // checked
})
从上面例子可以看出同样是获取复选框是否选中,js的获取值是布尔值,即true 或者 false,而jQuery的获取值则是checked或者undefined
复选框之checked属性的更多相关文章
- html input复选框的checked属性
input --checked: 只要复选框有checked属性,不管属性值为空或者为true or false或任意值,复选框都会被选中.切忌:checked属性值不要带引号 <input t ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- 【JSP/Servlet】后台如何获取复选框或可选属性的同名参数
感觉自己jsp/servlet部分学的太差了--今天突然想到还有这种操作,遂分享之 比如有些时候我们需要使用复选框发送同名数据的时候,后台接收参数是个麻烦事,还有可选属性也是如此 有丰富经验的会想到a ...
- 复选框,:checked
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 复选框操作checked选中为true,反之为False,也可以赋值为true,false
- JQuery Mobile - 修改复选框的选中状态无效解决办法!
今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...
- jQuery+SpringMVC中的复选框选择与传值
一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...
- angularJs获取复选框中id 进行批量删除
主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...
- jQuery实现复选框的全选与全不选
对于复选框的选中checked属性,实在是无力吐槽. 从上图可以看出,当复选框不设置checked属性时,默认没有被选中:其它三种情况,设置checked属性但不设置属性值即置空,或者将checked ...
随机推荐
- 统计nginx单个IP访问日志并获取IP来源
#!/usr/bin/env python #coding=utf-8 import requests from urllib2 import urlopen # import lxml.html f ...
- java 快速排序
快速排序比插入排序快了两个数量级 package test.sort; public class Paixu { public static void main(String[] args) { // ...
- [HNOI2008]Cards
题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...
- umask的作用[转]
umask的作用 umask 命令允许你设定文件创建时的缺省模式,对应每一类用户(文件属主.同组用户.其他用户)存在一个相应的umask值中的数字.对于文件来说,这一数字的最 大值分别是6.系统不允许 ...
- Head First设计模式之适配器模式
一.定义 适配器模式把一个类的接口,变换成客户端所期待的另一种接口,使原本因接口不匹配的两个类能够在一起工作. 二.结构 角色: Client:用户类,使用新接口Target来完成某些特定的需求. T ...
- HTML、CSS、JS 复习——序
HTML在MVC中担任着M的角色.由HTML组成的节点称之为HTML DOM.要想成为一流的大神,就必须能分分钟建立起一个强大的HTML DOM.而要做到这点,就必须了解甚至精通HTML. CSS在M ...
- px-rem自适应转换
当前团队开发过程,存在2种度量单位(px.rem)各有说辞px:各个终端统一大小,简单明了,未尝不可!rem:大屏幕显示大字体,小屏幕显示小字体,渐进增强视觉感.业界各种写法都有,不逐一讨论.团队呼声 ...
- Java JSON数据处理
比方说要处理这么 {"data":[{"salt":"","plaintext":"xiaoxu", ...
- 企业信息化快速开发平台--JeeSite
JeeSite是在Spring Framework基础上搭建的一个Java基础开发平台,以Spring MVC为模型视图控制器,MyBatis为数据访问层, Apache Shiro为权限授权层,Eh ...
- asp.net权限认证篇外:4种认证类型比较
1.基本认证,这是以base64加密用户口令并通过http header传输的一种认证方式,但是很容易被破解,因为base64解密没有任何难度: 如果数据被截包,会直接泄露用户口令:所以一般情况下都不 ...