注意:当元素中有checked属性时,其值无论是什么,都是被选中状态,那怎么才能让其不被选中呢,就是用jquery或js代码实现

  1、html中的checked属性。仔细研究下会发现一个很怪异的现象。

  

  你知道上面这四个复选框到底那些被选中了?那些没被选中吗?

  其实乍一看我也不知道结果,运行完后也想不通为什么,查看资料才发现确实是那样的。

  结果是:

  

  其实原理是这样的,复选框里只要有checked属性,不管是否为其赋值,结果为空或true或false或任意值,均为选中状态。

  

  2、利用javascript操作checked来控制复选框是否选中。

  

  结果:

  

  要使其不选中,即设置checked属性值为false。

  3.利用jQuery操作checked来控制复选框选中与否。

  

  结果第一个复选框选中。

  相反的,checked属性值设为false就是未选中了

  

  这里需注意:

  无论是用javascript还是jQuery来操作checked属性,其值均为true或false,切忌带引号,否则会出错。

  补充:获取复选框是否选中问题:

  例如,有这样一个例子,我要获取这三个复选框是否选中:

1
2
3
<input type="checkbox" name="checkbox1" id="checkbox1" checked>看书
<input type="checkbox" name="checkbox2" id="checkbox2">电影
<input type="checkbox" name="checkbox3" id="checkbox3" checked>爬山

  在js中,我们可以这样来写:

1
2
3
4
5
6
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中,可以这样获取:

1
2
3
4
5
$(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

最新文章

  1. 真正shopex分销王2代DRP系统源码正版安装版本终身商业授权
  2. Android -- ViewDragHelper
  3. iOS开发 弹簧效果
  4. Merry Christmas 2015
  5. WPF之UseLayoutRounding和SnapsToDevicePixels
  6. 【转】Effective-Objective-C-读书笔记-Item-4-如何正确定义常量 -- 不错
  7. C#下如何用NPlot绘制期货股票K线图(1)?
  8. JavaScript学习总结【12】、JS AJAX应用
  9. [SAM4N学习笔记]按键程序(查询方式)
  10. 数据结构练习 00-自测5. Shuffling Machine (20)
  11. 工程中.pch文件的作用 及使用方法
  12. centos7/redhat7 将网卡名字改成eth样式的方法
  13. Openfire3.9.1+jdk1.7导入到eclipse中
  14. react native中一次错误排查 Error:Error: Duplicate resources
  15. node的第一步,hello,以及小技巧和CPU使用情况。到底能用几个核心?
  16. String 类的实现(2)引用计数与写时拷贝
  17. dubbo RPC超时异常小结
  18. Spring学习之路-SpringBoot简单入门
  19. c# 调用短信平台接口,给手机发送短信
  20. eclipse中文乱码解决

热门文章

  1. TabController定义顶部tab切换
  2. day14—jQuery UI 之dialog部件
  3. jmeter之ServerAgent监控资源
  4. python web自动化测试框架搭建(功能&amp;接口)——测试用例执行和结果收集
  5. 使用HEXO建站
  6. JedisPool使用注意事项
  7. Python 学习笔记20 自定义robot Framework 关键字
  8. MyEclipse下Junit报错&quot;The input type of the launch configuration&quot;
  9. Vue的入门之安装
  10. Zookeeper---作为服务注册中心