javascript怎么判断复选框是否选中?

在web前端中做一些类似用户资料提交的功能时,有时需要用到html的复选框,来让用户自定义选择一些默认设置好的项目,今天就来说一说,如何利用 javascript 和 jquery 来判断html复选框是否被选中。

复选框对象具有一个checked属性,如果属性值等于true,那么说明选中,如果等于false,则说明没选中。

javascript 判断复选框是否被选中的方法

示例1:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<script type="text/javascript">
window.onload=function(){
  var ock=document.getElementById("ck");
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("thediv");
  obt.onclick=function(){
    if(ock.checked==true){
      odiv.innerHTML="复选框被选中";
    }
    else{
      odiv.innerHTML="复选框没有被选中";
    }
  }
}
</script>
</head>
<body>
<div id="thediv"></div>
<input type="checkbox" id="ck" value="1"/>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

示例2:

<!--html代码-->
<input type="checkbox" name="green"  onclick="Get(this)" />绿色
<script>
    function Get(e){
        //每次点击都会输出当前的状态
        console.log(e.checked);
    }
</script>

示例3:

<!--html代码-->
<input type="checkbox" name="green"  onclick="Get()" />绿色
<script>
    function Get(){
        var check = document.getElementsByTagName('input')[0];
        //每次点击都会打印出当前的状态
        console.log(check.checked);
    }
</script>

输出结果:

1.jpg

注意:

1、checkbox复选框被选中时,输出 true ,否则输出 false

2、以上两个示例的效果相同,只是调用的方法不同而已

jquery 判断复选框是否被选中的方法

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

推荐学习:javascript视频教程!!

以上就是javascript怎么判断复选框是否选中?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏