网站首页 > 基础教程 正文
在web前端中做一些类似用户资料提交的功能时,有时需要用到html的复选框,来让用户自定义选择一些默认设置好的项目,今天就来说一说,如何利用 javascript 和 jquery 来判断html复选框是否被选中。
javascript 判断 checkbox 复选框是否被选中的方法
示例1:
<!--html代码--> <input type="checkbox" name="green" onclick="Get(this)" />绿色 <script> function Get(e){ //每次点击都会输出当前的状态 console.log(e.checked); } </script>
示例2:
<!--html代码--> <input type="checkbox" name="green" onclick="Get()" />绿色 <script> function Get(){ var check = document.getElementsByTagName('input')[0]; //每次点击都会打印出当前的状态 console.log(check.checked); } </script>
输出结果:
注意:
1、checkbox复选框被选中时,输出 true ,否则输出 false
2、以上两个示例的效果相同,只是调用的方法不同而已
jquery 判断 checkbox 复选框是否被选中的方法
jquery 判断 checkbox 复选框是否被选中,可以使用 is() 和 prop() 两种方法,都非常的简单
is() 方法判断复选框是否被选中的代码:
<!--html代码--> <input type="checkbox" name="host" id="mochu" />网站:http://www.feiniaomy.com <script> $('#mochu').click(function(){ console.log($(this).is(':checked')); }); </script>
prop() 方法判断复选框是否被选中的代码:
<script> $('#mochu').click(function(){ console.log($(this).prop('checked')); }); </script>
注意:prop()方法只能在 jquery 1.6版本之后使用,1.6之前的版本会报错
补充内容:
在 jquery 1.6 之前的版本中,可以使用 attr() 方法来判断复选框是否被选中,但1.6之后的版本,attr()方法会返回 undefined.
示例代码:
$('mochu').attr('checked')
猜你喜欢
- 2024-11-25 React 与 虚拟DOM
- 2024-11-25 Vue 的这5个技巧,可以大大提高我们的构建体验
- 2024-11-25 全新web前端开发教程之Jquery事件
- 2024-11-25 JQuery 实现简易记事簿
- 2024-11-25 一波Ts 基础大全;领先同事的机会来了
- 2024-11-25 Python教程:报表和日志精讲
- 2024-11-25 「jQuery-3」 获取和设置标签元素
- 2024-11-25 jq中attr 设置checkbox 选中状态中的坑
- 2024-11-25 「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript
- 2024-11-25 jquery常用基础方法
- 06-09Socioeconomic growth goals high on meetings' agenda
- 06-09Cities Along Middle Reaches of Yangtze River Agree on 63 Cooperation Items
- 06-09Scientists to make flag flutter on moon
- 06-09CBN丨Foreign-funded institutions bullish on Chinese assets
- 06-09Full Text: Joint Statement between the People's Republic of China and the French Republic on Climate Change on the occasion of the Tenth Anniversary of the Paris Agreement
- 06-092022年底总结,温暖和激励自己的文案
- 06-09百度实时推送代码解决方案(百度实时推送工具)
- 06-09PHP漏洞之跨网站请求伪造(php跨站脚本攻击)
- 最近发表
-
- Socioeconomic growth goals high on meetings' agenda
- Cities Along Middle Reaches of Yangtze River Agree on 63 Cooperation Items
- Scientists to make flag flutter on moon
- CBN丨Foreign-funded institutions bullish on Chinese assets
- Full Text: Joint Statement between the People's Republic of China and the French Republic on Climate Change on the occasion of the Tenth Anniversary of the Paris Agreement
- 2022年底总结,温暖和激励自己的文案
- 百度实时推送代码解决方案(百度实时推送工具)
- PHP漏洞之跨网站请求伪造(php跨站脚本攻击)
- ThinkPHP后台入口地址查找(thinkphp build.php)
- PHP新手如何提高代码质量(php新手如何提高代码质量的方法)
- 标签列表
-
- jsp (69)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- linux命令大全 (65)
- pythonif (86)
- location.href (69)
- dockerexec (65)
- tail-f (79)
- queryselectorall (63)
- location.search (79)
- bootstrap教程 (74)
- deletesql (62)
- linuxgzip (68)
- 字符串连接 (73)
- html标签 (69)
- c++初始化列表 (64)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)