jquery复选框多选赋值给文本框的方法

Z时代
2024-01-10
分类：综合

本文实例讲述了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>