JQuery获取Checkbox组的值
2015-12-21 14:11
495 查看
前台:
点击文字选中checkbox:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同
JQuery代码:
效果:
<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>
效果:
相关文章推荐
- jquery获取地址栏的get参数
- 用JQuery操作元素的style属性
- BBOSS框架使用jquery方式传參到后台的时候,要注意的事项
- Js/Jquery获取iframe中的元素
- jQuery焦点图插件SaySlide
- jquery 插件扩展2
- jquery 插件扩展
- jQuery学习笔记(三)
- jquery实现删除一个元素后面的所有元素功能
- jQuery Validate 表单验证
- jquery中attr和prop的区别
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
- jQuery中的mouseleave和mouseout的区别
- jqueryEasyUI中给accordion伸缩面板动态赋title值
- 抛弃jQuery,拥抱原生JavaScript
- placeholder的兼容处理(jQuery下)
- placeholder的兼容处理(jQuery下)
- jQuery API
- 用户界面框架jQuery EasyUI示例大全之Panel
- 自己写jquery插件之模版插件高级篇(一)