JQuery获取Checkbox组的值

前台：

 1      <div id="addtrtr" style="padding:20px; background-color:#F8F8F8;">
 2      <table id="mytable" style="background-color:#F8F8F8; width:100%; padding:10px;">
 3      <tr>
 4      <td width="8%"><asp:DropDownList ID="DropCivil" runat="server" Width="100%" Height="24">
 5         <asp:ListItem>土建项目部</asp:ListItem>
 6     </asp:DropDownList></td>
 7     <td width="8%"><asp:DropDownList ID="DropName" runat="server" Width="100%" Height="24">
 8         <asp:ListItem>项目部名称</asp:ListItem>
 9     </asp:DropDownList></td>
10     <td>
11         <input id="dt1" type="checkbox" name="newsletter" value="单体工程名称1" /><label for="dt1">单体工程名称1</label>
12         <input id="dt2" type="checkbox" name="newsletter" value="单体工程名称2" /><label for="dt2">单体工程名称2</label>
13         <input id="dt3" type="checkbox" name="newsletter" value="单体工程名称3" /><label for="dt3">单体工程名称3</label>
14         <input id="dt4" type="checkbox" name="newsletter" value="单体工程名称4" /><label for="dt4">单体工程名称4</label>
15     </td>
16 
17      <td width="6%"><asp:Button ID="Button1" runat="server" CssClass="submit" Text="修改" /></td>
18     <td width="6%"><asp:Button ID="Button2" runat="server" CssClass="submit" Text="删除" /></td>
19     </tr>
20     </table>
21     <input id="addtr" name="AddNext" type="button" value="添加一行" class="keyword required" />

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

JQuery代码：

 1 <script type="text/javascript">
 2     $(document).ready(function () {
 3         $("input[name=AddNext]").click(function () {
 4             var civil = $("#<%=DropCivil.ClientID%> option:selected").text().toString();
 5             var projectname = $("#<%=DropName.ClientID%> option:selected").text().toString();
 6             var str;
 7             $("input:checked").each(function (i) {         //循环拼装被选中项的值  
 8                 str += $(this).val() + ',';
 9             });
10 
11 
12             if (civil != "" && projectname != "") {
13                 var sb = "<div>";
14                 sb += "<input type='text' name='DropCivil'  size='10' value='" + civil + "' Class='keyword' ReadOnly='false'/>&nbsp;";
15                 sb += "<input type='text' name='DropName' size='10' value='" + projectname + "' Class='keyword' ReadOnly='false' />&nbsp;";
16                 sb += "<input type='text' name='MonomerName' size='50' value='" + str.substr(9) + "' Class='keyword' ReadOnly='false' />&nbsp;";
17                 sb += "</div>";
18                 $('#addtrtr').append(sb);
19 
20             }
21             else {
22                 alert("信息不能为空！");
23             }
24         });
25     });
26         function AddPrediction_getDel(k) {
27             $(k).parent().remove();
28         }
29 </script>

效果：

posted on 2015-12-21 14:11 格林威治阅读(1040) 评论(0) 编辑收藏举报