您的位置:首页 > Web前端 > JQuery

JQuery获取Checkbox组的值

2015-12-21 14:11 495 查看
前台:

<div id="addtrtr" style="padding:20px; background-color:#F8F8F8;">
<table id="mytable" style="background-color:#F8F8F8; width:100%; padding:10px;">
<tr>
<td width="8%"><asp:DropDownList ID="DropCivil" runat="server" Width="100%" Height="24">
<asp:ListItem>土建项目部</asp:ListItem>
</asp:DropDownList></td>
<td width="8%"><asp:DropDownList ID="DropName" runat="server" Width="100%" Height="24">
<asp:ListItem>项目部名称</asp:ListItem>
</asp:DropDownList></td>
<td>
<input id="dt1" type="checkbox" name="newsletter" value="单体工程名称1" /><label for="dt1">单体工程名称1</label>
<input id="dt2" type="checkbox" name="newsletter" value="单体工程名称2" /><label for="dt2">单体工程名称2</label>
<input id="dt3" type="checkbox" name="newsletter" value="单体工程名称3" /><label for="dt3">单体工程名称3</label>
<input id="dt4" type="checkbox" name="newsletter" value="单体工程名称4" /><label for="dt4">单体工程名称4</label>
</td>

<td width="6%"><asp:Button ID="Button1" runat="server" CssClass="submit" Text="修改" /></td>
<td width="6%"><asp:Button ID="Button2" runat="server" CssClass="submit" Text="删除" /></td>
</tr>
</table>
<input id="addtr" name="AddNext" type="button" value="添加一行" class="keyword required" />


点击文字选中checkbox:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同

JQuery代码:

<script type="text/javascript">
$(document).ready(function () {
$("input[name=AddNext]").click(function () {
var civil = $("#<%=DropCivil.ClientID%> option:selected").text().toString();
var projectname = $("#<%=DropName.ClientID%> option:selected").text().toString();
var str;
$("input:checked").each(function (i) {         //循环拼装被选中项的值
str += $(this).val() + ',';
});

if (civil != "" && projectname != "") {
var sb = "<div>";
sb += "<input type='text' name='DropCivil'  size='10' value='" + civil + "' Class='keyword' ReadOnly='false'/> ";
sb += "<input type='text' name='DropName' size='10' value='" + projectname + "' Class='keyword' ReadOnly='false' /> ";
sb += "<input type='text' name='MonomerName' size='50' value='" + str.substr(9) + "' Class='keyword' ReadOnly='false' /> ";
sb += "</div>";
$('#addtrtr').append(sb);

}
else {
alert("信息不能为空!");
}
});
});
function AddPrediction_getDel(k) {
$(k).parent().remove();
}
</script>


效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: