<html>
<!--
作者：me@longlonggo.com
时间：2017-05-11
描述：点击文字选中/取消选中 文本框
-->
<head>
<meta charset="UTF-8"/>
<title>点击文字选中/取消选中 文本框</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<link rel="shortcut icon" href="{#ZC_BLOG_HOST#}favicon.ico" />
<style type="text/css">
.textSpan{
cursor : pointer;
cursor : hand;
}
</style>
</head>
<body>
<input id="chk1" type="checkbox" />
<span class="textSpan">多选框A</span>
<input id="chk2" type="checkbox" checked="checked" />
<span class="textSpan">多选框B</span>
</body>
<script type="text/javascript">
$(function(){
//点击多选框后面的文字，选中或取消选中多选框，提升人性化体验
$(".textSpan").click(function(){
var $prevInput = $(this).prev("input[type='checkbox']");//获取前一个checkbox对象
// if (!$prevInput.prop("checked")) {
if (!$prevInput.is(':checked')) { //或者这么写
$prevInput.prop("checked", true);
return;
}
$prevInput.prop("checked", false);
})
})
</script>
</html>