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