jquery 操作 checkbox 相关方法
韩阳飙
使用 jquery 操作 checkbox ，相关方法如下
1、设置 checkbox 选中
使用 prop("checked", true) 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<form>
<input type="checkbox" name="name" value="1" />贾元春
<input type="checkbox" name="name" value="2" />贾迎春
<input type="checkbox" name="name" value="3" />贾探春
<input type="checkbox" name="name" value="4" />贾惜春
</form>
</div>
<script>
$('input[name=name]:eq(2)').prop("checked", true);
</script>
</body>
</html>
设置 name 是 name 的第3个 input 输入框选中
2、设置 checkbox 不选中
使用 prop("checked", false) 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<form>
<input type="checkbox" name="name" value="1" checked="checked" />贾元春
<input type="checkbox" name="name" value="2" checked="checked" />贾迎春
<input type="checkbox" name="name" value="3" checked="checked" />贾探春
<input type="checkbox" name="name" value="4" checked="checked" />贾惜春
</form>
</div>
<script>
$('input[name=name]:eq(2)').prop("checked", false);
</script>
</body>
</html>设置 name 是 name 的第3个 input 输入框不选中
3、判断是否选中
使用 is(':checked') 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<form>
<input type="checkbox" name="name" value="1" checked="checked" />贾元春
<input type="checkbox" name="name" value="2" checked="checked" />贾迎春
<input type="checkbox" name="name" value="3" checked="checked" />贾探春
<input type="checkbox" name="name" value="4" checked="checked" />贾惜春
</form>
</div>
<script>
let check = $('input[name=name]:eq(2)').is(':checked')
console.log(check)
</script>
</body>
</html>判断 name 是 name 的第3个 input 输入框是否选中
4、获取全部选中项
使用 $('input[name=name]:checked') 形式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<form>
<input type="checkbox" name="name" value="1" checked="checked" />贾元春
<input type="checkbox" name="name" value="2" checked="checked" />贾迎春
<input type="checkbox" name="name" value="3" />贾探春
<input type="checkbox" name="name" value="4" checked="checked" />贾惜春
</form>
</div>
<script>
let vs = $('input[name=name]:checked')
//遍历
for(let v of vs) {
console.log(v.value)
}
//或
$.each(vs, function() {
console.log($(this).val())
})
</script>
</body>
</html>获取 name 是 name 的 input 输入框选中的 value 值
至此完
类似资料：