jquery復(fù)選框多選賦值給文本框的方法

更新時間：2015年01月27日 10:19:26 投稿：shichen2014

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

本文實(shí)例講述了jquery復(fù)選框多選賦值給文本框的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html>  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<title>jquery點(diǎn)擊復(fù)選框觸發(fā)事件給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>