网站首页 > 知识剖析 正文
在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-19 HTML的表单标签
- 2024-11-19 HTML编码规范
- 2024-11-19 Dreamweaver/Html常用标签(代码)含义汇总
- 2024-11-19 程序员都必掌握的前端教程之VUE基础教程(七)
- 2024-11-19 HTML标签之表单标签
- 2024-11-19 10个免费的HTML在线编辑工具
- 2024-11-19 jquery获取选中的checkbox复选框的值
- 2024-11-19 这些 CSS 伪类,你可能还不知道,可以用起来了
- 2024-11-19 前端入门——css伪类和伪元素
- 2024-11-19 HTML-注册页面 212
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)