zoukankan      html  css  js  c++  java
  • JQuery获取Checkbox组的值

    前台:

     1      <div id="addtrtr" style="padding:20px; background-color:#F8F8F8;">
     2      <table id="mytable" style="background-color:#F8F8F8; 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>

    效果:

  • 相关阅读:
    python基础4
    python的基础数据类型和编码
    python的if语句和while循环
    java特殊运算符
    深入理解java集合
    python常用模块
    python函数的参数问题
    集合关系之间的运算
    集合
    可变类型与不可变类型
  • 原文地址:https://www.cnblogs.com/zsmj001/p/5063275.html
Copyright © 2011-2022 走看看