您的位置：首页 > 其它

checkbox的常用操作

2015-07-22 16:23 295 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Script/Plugin/JQuery/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {

// 判断是否勾选1
$('#judgeBtn1').click(function () {
if ($('#checkTest').is(':checked')) {
alert('checked');
} else {
alert('not checked');
}
});

// 判断是否勾选2
$('#judgeBtn2').click(function () {
if ($('#checkTest').prop('checked')) {
alert('checked');
} else {
alert('not checked');
}
});

// 勾选1
$('#checkBtn1').click(function () {
$('#checkTest').prop('checked', 'checked');
});

// 勾选2
$('#checkBtn2').click(function () {
$('#checkTest').prop('checked', true);
});

// 勾选3
$('#checkBtn3').click(function () {
$('#checkTest').prop({ checked: true });
});

// 勾选4
$('#checkBtn4').click(function () {
$('#checkTest').prop("checked", function () {
return true;//函数返回true或false
});
});

// 勾选5，注意：仅能一次生效！！！
$('#checkBtn5').click(function () {
$('#checkTest').attr('checked', true);
});

// 取消勾选1
$('#cancelBtn1').click(function () {
$('#checkTest').attr('checked', false);
});
// 取消勾选2
$('#cancelBtn2').click(function () {
$('#checkTest').prop('checked', false);
});

// 建议使用prop()
// 判断：if($('#checkTest').prop('checked')){}else{}
// 勾选：$('#checkTest').prop('checked', true);
// 取消：$('#checkTest').prop('checked', false);</span>
});

</script>
</head>
<body>

<input type="checkbox" id="checkTest" />瞅啥呢？<br />
<input type="button" value="判断是否勾选1" id="judgeBtn1" /><br />
<input type="button" value="判断是否勾选2" id="judgeBtn2" /><br />
<br />
<input type="button" value="勾选1" id="checkBtn1" /><br />
<input type="button" value="勾选2" id="checkBtn2" /><br />
<input type="button" value="勾选3" id="checkBtn3" /><br />
<input type="button" value="勾选4" id="checkBtn4" /><br />
<input type="button" value="勾选5" id="checkBtn5" /><br />
<br />
<input type="button" value="取消勾选1" id="cancelBtn1" /><br />
<input type="button" value="取消勾选2" id="cancelBtn2" /><br />
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航