jQuery判断checkbox是否选中的3种方法

作者:小满

时间:2026-10-28

浏览:248

本文介绍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返回值

问题根源何在?借助调试工具排查

jQuery判断checkbox是否选中的3种方法

显而易见,通过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 }

本文介绍至此,基本无问题,望大家日后多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章