jquery实现勾选复选框触发事件给input赋值
代码如下：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery点击复选框触发事件给input赋值-柯乐义</title><basetarget="_blank"/>
<styletype="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:solid8px#ddd;
margin:40pxauto;
}
.tablisttd{
line-height:24px;
border-bottom:solid1px#ddd;
text-align:left;
padding:10px;
}
.tablisttdinput{
line-height:20px;
margin-left:5px;
}
.tablisttd.txtValue
{
padding:3px0;
width:180px;
}
</style>
</head>
<body>
<tablecellpadding="0"cellspacing="0"class="tablist">
<tr>
<td><inputclass="txtValue"type="text"name="keleyi"value=""/> <inputtype="checkbox"data-type="checkall"/>全选</td>
</tr>
<tr>
<td>
<inputtype="checkbox"name="keleyi"data-type="checkbox"data-value="张三"value="1"/>张三
<inputtype="checkbox"name="keleyi"data-type="checkbox"data-value="李四"value="2"/>李四
<inputtype="checkbox"name="keleyi"data-type="checkbox"data-value="柯乐义"value="3"/>柯乐义
<inputtype="checkbox"name="keleyi"data-type="checkbox"data-value="赵六"value="4"/>赵六
</td>
</tr>
</table>
<scripttype="text/javascript"src="jquery/jquery-1.11.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
$('[data-type="checkbox"]').click(function(){
vardata_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(){
varstr='';
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>
以上就是本代码的全部了，小伙伴们自由扩展，美化，希望大家能够喜欢。