jq点击复选框触发事件给input赋值js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jq点击复选框触发事件给input赋值js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq点击复选框触发事件给input赋值</title>
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
/* tablist */
.tablist{width:400px;border:solid 8px #ddd;margin:40px auto;}
.tablist td{line-height:24px;border-bottom:solid 1px #ddd;text-align:left;padding:10px;}
.tablist td input{ line-height:20px; margin-left:5px;
.tablist td .txtValue{padding:3px 0;width:180px;}
</style>
<table cellpadding="0" cellspacing="0" class="tablist">
	<tr>
		<td><input class="txtValue" type="text" name="name" value="" />&nbsp;&nbsp;<input type="checkbox" data-type="checkall"/>全选</td>
	</tr>
	<tr>
		<td>
		<input type="checkbox" name="name" data-type="checkbox" data-value="张三" value="1" />张三
		<input type="checkbox" name="name" data-type="checkbox" data-value="李四" value="2" />李四
		<input type="checkbox" name="name" data-type="checkbox" data-value="王五" value="3" />王五
		<input type="checkbox" name="name" data-type="checkbox" data-value="赵六" value="4" />赵六
		</td>
	</tr>
</table>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$('[data-type="checkbox"]').click(function(){
		var data_value = $(this).attr('data-value'),
			txtalso = $.trim($(".txtValue").val());
		if($(this).prop("checked")) {
			if(txtalso.length > 0) {
				if(txtalso.indexOf(data_value+',') != -1) {
					return ;
				} else {
					txtalso += data_value + ',';
				}
			} else {
				txtalso = data_value+',';
			}
		} else {
			if(txtalso.indexOf(data_value+',') != -1) {
				txtalso = txtalso.replace(data_value+',', '');
			}
		}
		$(".txtValue").val(txtalso);
	});
	$('[data-type="checkall"]').click(function(){
		var str = '';
		if($(this).prop("checked")) {
			$.each($('[data-type="checkbox"]'), function(i){
				str += $(this).attr('data-value') + ',';
			});
			$('[data-type="checkbox"]').prop('checked', true);
		} else {
			$('[data-type="checkbox"]').prop('checked', false);
		}
		$(".txtValue").val(str);
	});
});
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)