js判断checkbox是否被选中(js获取复选框选中的值 )

在web前端中做一些类似用户资料提交的功能时,有时需要用到html的复选框,来让用户自定义选择一些默认设置好的项目,今天就来说一说,如何利用javascript和jquery来判断html复选框是否被选中。 javascript判断checkbox复选框是否被选中的方法 示例1: <!–html代码–> <inputtype="checkbox"name="green"onc…

在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>

输出结果:

js判断checkbox是否被选中(js获取复选框选中的值 )

注意:

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\')

本文来自投稿,不代表来拓客立场,如若转载,请注明出处:https://www.laituoke.com/ltk/7838.html