<! DOCTYPE html>
<title>jquery Click CheckBox to trigger event to input assignment-ke keeper </title><base target= "_blank"/>
<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, "new song Body";
}
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>
<body>
<table cellpadding= "0" cellspacing= "0" class= "tablist" >
<tr>
<td><input class= "TxtValue" type= "text" name= "keleyi" value= ""/> <input type= "checkbox" Data-type= " Checkall "/> All choice </td>
</tr>
<tr>
<td>
<input type= "checkbox" Name= "keleyi" data-type= "checkbox" Data-value= "John" value= "1"/> John
<input type= "checkbox" Name= "keleyi" data-type= "checkbox" data-value= "Dick" value= "2"/> Dick
<input type= "checkbox" Name= "keleyi" data-type= "checkbox" data-value= "Collayi" value= "3"/> Collayi
<input type= "checkbox" Name= "keleyi" data-type= "checkbox" data-value= "Zhao Liu" value= "4"/> Zhao Liu
</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>
The above is the code of all, small partners free expansion, landscaping, I hope you can enjoy.
