今天无意中看到同事在学习复选框里面的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属性的更多相关文章

  1. html input复选框的checked属性

    input --checked: 只要复选框有checked属性,不管属性值为空或者为true or false或任意值,复选框都会被选中.切忌:checked属性值不要带引号 <input t ...

  2. jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏

    <!doctype html><html> <head> <meta charset="utf-8"> <title>j ...

  3. 【JSP/Servlet】后台如何获取复选框或可选属性的同名参数

    感觉自己jsp/servlet部分学的太差了--今天突然想到还有这种操作,遂分享之 比如有些时候我们需要使用复选框发送同名数据的时候,后台接收参数是个麻烦事,还有可选属性也是如此 有丰富经验的会想到a ...

  4. 复选框,:checked

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 复选框操作checked选中为true,反之为False,也可以赋值为true,false

  6. JQuery Mobile - 修改复选框的选中状态无效解决办法!

    今晚,在编写JQuery Mobile程序时候,需要在代码里面控制复选框的选中状态,很简单的代码啊,很快完成了!等测试程序时候傻眼了,页面无论如何也不按照我写的代码显示出来!问题出在哪里呢?是我写的控 ...

  7. jQuery+SpringMVC中的复选框选择与传值

    一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...

  8. angularJs获取复选框中id 进行批量删除

    主要思路:我们需要定义一个用于存储选中 ID 的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除.在点击删除按钮时需要用到这个存储了 ID 的数组. ...

  9. jQuery实现复选框的全选与全不选

    对于复选框的选中checked属性,实在是无力吐槽. 从上图可以看出,当复选框不设置checked属性时,默认没有被选中:其它三种情况,设置checked属性但不设置属性值即置空,或者将checked ...

随机推荐

  1. LODOP打印控件示例

    一.lodop打印预览效果图 LODOP.PRINT_SETUP();打印维护效果图 LODOP.PREVIEW();打印预览图 二.写在前面 最近项目用到了LODOP的套打,主要用到两个地方,一是物 ...

  2. 解决linux重启后无法开启nginx问题“var/run/nginx/nginx.pid" no such file or directory问题

    起因:每次重启虚拟机后,var/run/nginx/目录都会被删除,所以无法在这个目录创建nginx.pid文件, 可以自己创建var/run/nginx/目录,然后可以运行,但治标不治本,下次虚拟机 ...

  3. 轮播插件、原生js编写,弄懂这个,基本上各种轮播都可以自己写了

    直接上代码了: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  4. 麻瓜之我要学sql,啦啦啦啦

    四张表 学生表:编号,姓名,性别,班级,生日 CREATE TABLE IF NOT EXISTS student( sno TINYINT UNSIGNED NOT NULL, sname ) NO ...

  5. PHP array_map()

    PHP array_map() 函数 将函数作用到数组中的每个值上,每个值都乘以本身,并返回带有新值的数组: <?php function myfunction($v) { return($v* ...

  6. ASP.NET网页发布以及相关问题的解决

    今天做了一个统计站点的网页,想要发布一下,中间碰到不少问题,现在和大家分享一下! 这是我想要最终的网页结果: 1.发布站点到桌面(任意路径)       2.安装IIS   3.安装好后,打开IIS, ...

  7. 小程序语音红包中遇到的 语音识别silk转wav格式 如何在线转 或者mp3转wav格式

    公司在开发一个小程序语音红包,现在遇到的问题就是通过微信的小程序文档接口拿到的录音文件要么是silk格式的,要么是mp3格式的 但是呢,如果要调用百度的语音接口,又必须是wav格式的.也就是说通过微信 ...

  8. SCOI 2010 序列操作

    题目描述 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 1 a b ...

  9. 房上的猫:switch选择结构,与选择结构总结

    switch选择结构: 一.定义: switch选择结构,可以方便地解决等值判断问题二.语法:  switch(表达式){   case 常量1:    //代码块1;      break;   c ...

  10. 前端学习_02_vps、web服务器、域名申请

    vps申请 国内比较好用的服务器:阿里云,青云:在国内申请ip比较方便,但是必须要备案域名,否则马上就会被封禁掉. 话说我也有点自己的思路想做个网站,服务器还真的是个问题. 小型的网站只需要ECS服务 ...