jQuery/JS判断/设置checkbox的选中状态

项目中经常遇到 checked 选中的问题,可以通过 JS 或者 jQuery 实现。

1、JS 方法

判断选中:

var check = document.getElementsByTagName('input')[0];
console.log(check.checked);//false

因为HTML代码中没有设置 checked 属性值,所以默认返回 false ,反之则返回 true

若要在HTML中设置 checkbox 为选中状态则可以这样设置:

<input type="checkbox" name="box" checked="true">

设置/取消选中:

// 设置元素为选中状态
check.checked = true;
// 设置元素为未选中状态
check.checked = false;

2、jQuery 方法

判断选中:

(1)、JQ1.6版本之前(不包括1.6版本)判断 checkbox 是否被选中用的是 attr() 方法,HTML代码与上面相同,只放 jQuery 代码:

console.log($("input[type='checkbox']").attr('checked'));//false

不要想着在JQ1.6版本之前使用 prop() 方法,只会报出 $().prop()is not a function 的错误

(2)、JQ1.6版本之后Jquery中新引入了 prop() 方法,此时再用 attr() 方法判断 checkbox 的状态则会返回 undefined ,若有设置 checked 属性为 true ,则会返回 checked 而不是 true

1.6+版本 prop() 方法:

console.log($("input[type='checkbox']").prop('checked'));//false

(3)、除了以上两种方法JQ中还有一个 is() 方法同样可以判断 checkbox 的状态

is() 方法代码如下:

console.log($("input[type='checkbox']").is(':checked'));//false

要特别注意不要漏巧":disabled"中的"":"

设置选中:

$("input[name='checkbox']").attr("checked",true);

取消选中:

$("input[name='checkbox']").attr("checked",false);

注意:true 和 false 是布尔值,不需要加引号。

未经允许不得转载:Web前端开发资源网 » jQuery/JS判断/设置checkbox的选中状态

推荐阅读:

用css实现文本溢出 超出部分隐藏显示省略号

使用float后清除浮动的几种方法

html中hr标签的基础知识

jQuery text() html() val()设置内容和attr()设置属性的用法

CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

赞 (7)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)