JQUERY操作表单

2014-08-12 15:42:00

一. 重置表单

Java代码

1. $("form").each(function(){
2.    .reset();
3. });

二. 文本框，文本区域

1：得到值：

Java代码

1. var textval = $("#text_id").attr("value");

或者：

Java代码

1. var textval = $("#text_id").val();

2：清空内容

Java代码

1. $("#text_id").attr("value",'');

3：填充内容

Java代码

1. $("#text_id").attr("value",'test');

三. 单选框

1：回填赋值

Java代码

1. <span>性别：</span>
2. <input id="sex" name="sex" type="radio" value="1"/> 男
3. <input id="sex" name="sex" type="radio" value="0"/> 女

Java代码

1. <script language=javascript>
2.    $(document).ready(function() {
3.       $('[name="sex"]:radio').each(function() {
4.          if (this.value == 0) {
5.             this.checked = true;
6.          }
7.       });
8.    });
9. </script>

2：获取单选按钮的值：

Java代码

1. var valradio = $("input[@type=radio][@checked]").val();

3：获取一组名为(items)的radio被选中项的值*/

Java代码

1. var item = $('input[@name=items][@checked]').val();

4：设置value=2的项目为当前选中项:

Java代码

1. $("input[@type=radio]").attr("checked",'2');

5：获取一组名为(items)的radio被选中项的值(若未被选中 则val() = undefined ):

Java代码

1. var item = $('input[@name=items][@checked]').val();

6：radio单选组的第二个元素为当前选中值:

Java代码

1. $('input[@name=items]').get(1).checked = true;

四. 多选框checkbox
1:得到多选框的值

Java代码

1. var checkboxval = $("#checkbox_id").attr("value")；

2:使其未勾选

Java代码

1. $("#chk_id").attr("checked",'');

勾选

Java代码

1. $("#chk_id").attr("checked",true);

3:判断是否已经选中

Java代码

1. if($("#chk_id").attr('checked')==true) {
2.       ...
3. }

五. 下拉框

1:获取下拉列表的值

Java代码

1. var selectval = $('#select_id').val();

2:回填赋值

Java代码

1. <select name="sex" id="sex">
2.    <option value="">请选择</option>
3.    <option value="0">男</option>
4.    <option value="1">女</option>
5. </select>

Java代码

1. $(document).ready(function() {
2.    $("#sex").attr("value", ${filter.sex});
3. });

方案2：

Java代码

1. <select id="prStatCd" name="prStatCd">
2.    <option value="">--请选择--</option>
3.    <option value="10">新建</option>
4.    <option value="20">确认</option>
5.    <option value="91">否决</option>
6. </select>

Java代码

1. $("select[@name=prStatCd] option").each(function(k,v) {
2.    if ($(this).val() == "${param.prStatCd}") {
3.       $('#prStatCd')[0].selectedIndex = k;
4.       return false;
5.    }
6. });

3：设置value=test的项目为当前选中项:

Java代码

1. $("#select_id").attr("value",'test');

4：添加下拉框的option:

Java代码

1. $("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")

5：清空下拉框:

Java代码

1. $("#select_id").empty()；

6：获取select被选中项的文本

Java代码

1. var item = $("select[@name=items] option[@selected]").text();

7：select下拉框的第二个元素为当前选中值:

Java代码

1. $('#select_id')[0].selectedIndex = 1;

例子1

Java代码

1. $(function() {
2.     $("#isStu").click(function() {
3.         if ($(this).attr("checked")) {
4.             $(".ct7").show();
5.             $(".ct7 *[required]").attr("required", true);
6.         } else {
7.             $(".ct7").hide();
8.             $(".ct7 *[required]").attr("required", false);
9.         }
10.     })
11.     $("#isStu").attr("checked", true);
12.     $(".level").click(function() {
13.         var typeValue = $(".level").index(this);
14.         if (typeValue == 0) {
15.             $("#classType").empty();
16.             $("<option value=''>请选择班型</option>").appendTo("#classType");
17.             $("<option>大学英语四级VIP全程班</option>").appendTo("#classType");
18.         } else {
19.             $("#classType").empty();
20.             $("<option value=''>请选择班型</option>").appendTo("#classType");
21.             $("<option>大学英语六级VIP全程班</option>").appendTo("#classType");
22.         }
23.     });
24.     $(".level").click();
25. });

例子2

Java代码

1. 考试级别：
2. <select id="type" class="cet" name="type">
3.     <option value="0">全部</option>
4.     <option value="1">四级</option>
5.     <option value="2">六级</option>
6. </select>
7. <br>
8. 所选班型：
9. <select id="classType" class="cet" name="classType"></select>
10. <script type="text/javascript">
11.     $(document).ready(function() {
12.         $("#type").change(function() {
13.             $("#classType").empty();
14.             var value = $(this).val();
15.             if (value == 1) {
16.                 $("<option value=''>请选择班型</option>").appendTo("#classType");
17.                 $("<option>大学英语四级VIP全程班</option>").appendTo("#classType");
18.                 $("<option>大学英语四级精品全程班</option>").appendTo("#classType");
19.             } else if (value == 2) {
20.                 $("<option value=''>请选择班型</option>").appendTo("#classType");
21.                 $("<option>大学英语六级VIP全程班</option>").appendTo("#classType");
22.                 $("<option>大学英语六级精品全程班</option>").appendTo("#classType");
23.             }
24.         })
25.     });
26. </script>

例子3：

Java代码

1. <script type="text/javascript">
2.     function del() {
3.          if(confirm("确定删除吗？")){
4.              window.location = "/shaifenUserServletMaintain/-1?_method=updateStatus&ids=" + getIds();
5.          }
6.     }
7.     function shtg() {
8.         window.location = "/shaifenUserServletMaintain/1?_method=updateStatus&ids=" + getIds();
9.     }
10.     function cxsh() {
11.         window.location = "/shaifenUserServletMaintain/2?_method=updateStatus&ids=" + getIds();
12.     }
13.     function getIds() {
14.         var ids = "";
15.         $("input[name='id']").each(function() {
16.             if (this.checked) {
17.                 if (ids != "") {
18.                     ids += ",";
19.                 }
20.                 ids += this.value;
21.             }
22.         });
23.        return ids;
24.     }
25.     $("document").ready(function() {
26.         $("#all").click(function() {
27.             if (this.checked) {
28.                 $("input[name='id']").each(function() {
29.                     this.checked = true;
30.                 });
31.                 $("#qx").text("反选");
32.             } else {
33.                 $("input[name='id']").each(function() {
34.                     this.checked = false;
35.                 });
36.                 $("#qx").text("全选");
37.             }
38.         });
39.     })
40. </script>
41. <div class="m1">
42.     <a href="javascript:del()">批量删除</a>&nbsp;&nbsp;
43.     <a href="javascript:shtg()">批量审核通过</a>&nbsp;&nbsp;
44.     <a href="javascript:cxsh()">批量审核不通过</a>
45. </div>
46. <table width="100%" border="0" cellpadding="0" cellspacing="0" class="tab1 m1" id="tab2">
47.     <tr>
48.         <th width="40">
49.             <span id="qx">全选</span>
50.             <input type="checkbox" id="all" name="all">
51.         </th>
52.         <th width="60" align="center">ID</th>
53.         <th width="60" align="center">userId</th>
54.         <th width="120" align="center">姓名</th>
55.         <th width="100" align="center">级别</th>
56.     </tr>
57.  
58.     <c:forEach var="item" items="${list}" varStatus="status">
59.         <tr>
60.             <td align="center"><input type="checkbox" id="id" value="${item.id}" name="id"/></td>
61.             <td align="center">${item.id}</td>
62.             <td>${item.userId}</td>
63.             <td><c:out value="${item.realName}" escapeXml="true"/></td>
64.         </tr>
65.     </c:forEach>
66. </table>

例子4 ： 防止重复提交

方案1 ： 加在 按钮上

Java代码

1. $("document").ready(function() {
2.     $("input:submit").each(function() {
3.         $(this).click(function() {
4.             setdisabled(this,true);
5.             return true;
6.         });
7.     });
8.     function setdisabled(obj) {
9.         setTimeout(function() {
10.             obj.disabled = true;
11.         }, 100);
12.     }
13. })

特点： 点击按钮就执行，发生在  表单验证逻辑之前

方案2：加在 form 上

Java代码

1. $("document").ready(function() {
2.     $("#form1").submit(function(){
3.         setdisabled($("#tj"));
4.     });
5.     function setdisabled(obj) {
6.         setTimeout(function() {
7.             obj.disabled = true;
8.         }, 100);
9.     }
10. })

特点： 发生在  表单验证逻辑之后 ，表单验证不通过，不会触发。推荐采用

方案 3：

Java代码

1. $("document").ready(function() {
2.     $("#form1").submit(function() {
3.         $("#tj").attr("disabled","true");
4.     });
5. })

如果上面方法都不灵就用这个：

Java代码

1. <script type="text/javascript">
2.    var flag_submit = false;
3.     $(document).ready(function() {
4.         $("#form1").submit(function() {
5.             if(flag_submit){
6.                return false;
7.             }
8.             flag_submit = true;
9.         });
10.     })
11. </script>