JavaScript/jQuery

jQuery执行点击文字选中/取消选中 文本框

<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>

留言

您的电子邮箱地址不会被公开。 必填项已用*标注