checked属性 详解
2024-09-05 23:49:23
注意:当元素中有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
最新文章
- 真正shopex分销王2代DRP系统源码正版安装版本终身商业授权
- Android -- ViewDragHelper
- iOS开发 弹簧效果
- Merry Christmas 2015
- WPF之UseLayoutRounding和SnapsToDevicePixels
- 【转】Effective-Objective-C-读书笔记-Item-4-如何正确定义常量 -- 不错
- C#下如何用NPlot绘制期货股票K线图(1)?
- JavaScript学习总结【12】、JS AJAX应用
- [SAM4N学习笔记]按键程序(查询方式)
- 数据结构练习 00-自测5. Shuffling Machine (20)
- 工程中.pch文件的作用 及使用方法
- centos7/redhat7 将网卡名字改成eth样式的方法
- Openfire3.9.1+jdk1.7导入到eclipse中
- react native中一次错误排查 Error:Error: Duplicate resources
- node的第一步,hello,以及小技巧和CPU使用情况。到底能用几个核心?
- String 类的实现(2)引用计数与写时拷贝
- dubbo RPC超时异常小结
- Spring学习之路-SpringBoot简单入门
- c# 调用短信平台接口,给手机发送短信
- eclipse中文乱码解决
热门文章
- TabController定义顶部tab切换
- day14—jQuery UI 之dialog部件
- jmeter之ServerAgent监控资源
- python web自动化测试框架搭建(功能&;接口)——测试用例执行和结果收集
- 使用HEXO建站
- JedisPool使用注意事项
- Python 学习笔记20 自定义robot Framework 关键字
- MyEclipse下Junit报错";The input type of the launch configuration";
- Vue的入门之安装
- Zookeeper---作为服务注册中心