本文介绍jQuery中判断checkbox选中状态的三种常用方法。通过prop("checked")和is(":checked")获取布尔值,以及使用原生DOM属性.checked进行判断。文章还对比了不同获取元素方式的区别,并提供了实际代码示例,帮助开发者准确控制表单交互。
jQuery判断checkbox是否选中的3种方法
jQuery可大幅提升HTML开发效率,关于checkbox选中状态的判定存在多种方案:
1,通过 $(checkbox的id).prop("checked") 获取结果,该方式返回boolean类型值
2,利用 $(this).is(":checked") 进行判断,同样返回boolean类型值
以下示例演示点击checkbox时修改文本框属性的具体操作:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>exp8_3</title>
</head>
<body>
<input type="text" name="first" id="first"><br>
<input type="text" name="second" id="second"><br>
<input type="checkbox" name="cb" id="hide" value="1"><span id="v0">隐藏第三个文本框</span><br>
<input type="checkbox" name="cb" id="ml" value="2"><span id="v1">变长第一个文本框</span><br>
<input type="text" name="third" id="third">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript">
var t1 = $("#first");
var t2 = $("#second");
var t3 = $("#third");
$(document).ready(function(e) {
t2.mousedown(function(e) {//t2被鼠标按下后
var str = t1.val();//获得t1的文本信息
t2.val(str);//加载入t2的文本
});
$("#hide").click(function(e) {
//var flag = $(this).is(":checked");
var flag = $(this).prop("checked");
t3.toggle();//动态显示隐藏文本框
if(flag)
$("#v0").html("显示第三个文本框");
else
$("#v0").html("隐藏第三个文本框");
});
$("#ml").click(function(e) {
var flag2 = $(this).prop("checked");
if(flag2){
t1.css('width','300px');
$("#v1").html("变短第一个文本框");
}
else{
t1.css('width','169px');
$("#v1").html("变长第一个文本框");
}
});
});
</script>
</body>
</html>
js判断checkbox是否选中 .checked不管用
今日开发遭遇一疑难,特此记录备忘
document.getElementById("id").checked //正确 //若返回值true表示已选中 //若返回值false表示未选中 document.getElementsByClassName("class").checked //无法获取ture或false返回值
问题根源何在?借助调试工具排查

显而易见,通过id获取返回的是数组,通过class获取返回的是对象数组(即使仅含一个值) 因此应如下编写 document.getElementsByClassName("a1")[0].checked
下述方式作为补充说明
网络多数文章提供的方法均无效,令人困扰,本文方法经小编实测有效,推荐使用方法二:
方法一:
if ($("#checkbox-id")get(0).checked) { // do something }
方法二:
if($('#checkbox-id').is(':checked')) { // do something }
方法三:
if ($('#checkbox-id').attr('checked')) { // do something }
本文介绍至此,基本无问题,望大家日后多多支持本站。