jQuery表单选择填写功能js代码

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

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

以下是 jQuery表单选择填写功能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>jQuery表单选择填写功能</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 1px #ddd;margin:40px auto;}
.tablist td{line-height:24px;border-bottom:solid 1px #ddd;text-align:left;padding:10px;}
.tablist td .txtValue{padding:3px 0;width:180px;}
</style>

<table cellpadding="0" cellspacing="0" class="tablist">
	<tr>
		<td width="20px"><input type="checkbox" name="name" value=" " /></td>
		<td>张三</td>
		<td>1</td>
		<td>2</td>
		<td>2</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="name" value=" " /></td>
		<td>李四</td>
		<td>1</td>
		<td>2</td>
		<td>2</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="name" value=" " /></td>
		<td>王麻子</td>
		<td>1</td>
		<td>2</td>
		<td>2</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="name" value=" " /></td>
		<td>李四2</td>
		<td>1</td>
		<td>2</td>
		<td>2</td>
	</tr>
	<tr>
		<td colspan="5"><input class="txtValue" type="text" name="name" value="" /></td>
	</tr>
</table>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var count = 0;
	$(".tablist :checkbox").click(function(){
		var txtvalue = $(this).parent().next().text();
		if ($(".txtValue").val() == ""){
			if ($(this).attr("checked") == true){
				var txtalso = $.trim(txtvalue);
			} else {
				var txtalso = "";
			}
		}
		else {
			if ($(this).attr("checked") == true){
				var txtalso = $.trim($(".txtValue").val()) + "," + $.trim(txtvalue);
			}
			else {
				var txtelse = $.trim($(".txtValue").val());
				var txtnow = $.trim(txtvalue);
				var reg1 = "," + txtnow;
				var reg2 = txtnow + ",";
				var reg3 = txtnow;
				var txtelse = txtelse.replace(reg1, "").replace(reg2, "").replace(reg3, "");
				var txtalso = txtelse;
			}
		}
		$(".txtValue").val(txtalso);
		count++;

	});
});
</script>
</body>
</html>

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