jquery復選框多選賦值給文本框的方法

2024-05-06 16:15:18

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jquery復選框多選賦值給文本框的方法,涉及jQuery相關選擇器的使用技巧,需要的朋友可以參考下

本文實例講述了jquery復選框多選賦值給文本框的方法。分享給大家供大家參考。具體實現方法如下：

復制代碼代碼如下:

		<!DOCTYPE html>  
		<html xmlns="http://www.w3.org/1999/xhtml">  
		<head>  
		<title>jquery點擊復選框觸發事件給input賦值</title><base target="_blank" />  
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
		<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>  
		  
		</head>  
		<body>  
		  
		<table cellpadding="0" cellspacing="0" class="tablist">  
		<tr>  
		<td><input class="txtValue" type="text" name="keleyi" value="" />  <input type="checkbox" data-type="checkall" />全選</td>  
		</tr>  
		<tr>  
		<td>  
		<input type="checkbox" name="keleyi" data-type="checkbox" data-value="張三" value="1" />張三  
		<input type="checkbox" name="keleyi" data-type="checkbox" data-value="李四" value="2" />李四  
		<input type="checkbox" name="keleyi" data-type="checkbox" data-value="趙五" value="3" />趙五  
		<input type="checkbox" name="keleyi" data-type="checkbox" data-value="王六" value="4" />王六  
		</td>  
		</tr>  
		</table>  
		<script type="text/javascript" src="jquery/jquery-1.11.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>