jquery 操作表单

jquery 操作表单

一. 重置表单   

Java代码

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

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

 

二. 文本框，文本区域

1：得到值：

Java代码

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

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

或者：

Java代码

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

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

2：清空内容

Java代码

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

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

3：填充内容

Java代码

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

$("#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"/> 女 

<span>性别：</span><input id="sex" name="sex" type="radio" value="1"/> 男<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> 

<script language=javascript>   $(document).ready(function() {      $('[name="sex"]:radio').each(function() {         if (this.value == 0) {            this.checked = true;         }      });   });</script>

2：获取单选按钮的值：

Java代码

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

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

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

Java代码

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

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

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

Java代码

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

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

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

Java代码

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

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

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

Java代码

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

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

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

Java代码

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

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

2:使其未勾选

Java代码

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

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

   
勾选

Java代码

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

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

  
3:判断是否已经选中

Java代码

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

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

 
五. 下拉框

1:获取下拉列表的值

Java代码

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

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> 

<select name="sex" id="sex">   <option value="">请选择</option>   <option value="0">男</option>   <option value="1">女</option></select>

Java代码

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

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

方案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> 

<select id="prStatCd" name="prStatCd">   <option value="">--请选择--</option>   <option value="10">新建</option>   <option value="20">确认</option>   <option value="91">否决</option></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. }); 

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

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

Java代码

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

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

4：添加下拉框的option:  

Java代码

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

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

 
5：清空下拉框: 

Java代码

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

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

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

Java代码

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

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

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

Java代码

1. $('#select_id')[0].selectedIndex =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. }); 

$(function() {    $("#isStu").click(function() {        if ($(this).attr("checked")) {            $(".ct7").show();            $(".ct7 *[required]").attr("required", true);        } else {            $(".ct7").hide();            $(".ct7 *[required]").attr("required", false);        }    })    $("#isStu").attr("checked", true);    $(".level").click(function() {        var typeValue = $(".level").index(this);        if (typeValue == 0) {            $("#classType").empty();            $("<option value=''>请选择班型</option>").appendTo("#classType");            $("<option>大学英语四级VIP全程班</option>").appendTo("#classType");        } else {            $("#classType").empty();            $("<option value=''>请选择班型</option>").appendTo("#classType");            $("<option>大学英语六级VIP全程班</option>").appendTo("#classType");        }    });    $(".level").click();});

例子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> 

考试级别：<select id="type" class="cet" name="type">    <option value="0">全部</option>    <option value="1">四级</option>    <option value="2">六级</option></select><br>所选班型：<select id="classType" class="cet" name="classType"></select><script type="text/javascript">    $(document).ready(function() {        $("#type").change(function() {            $("#classType").empty();            var value = $(this).val();            if (value == 1) {                $("<option value=''>请选择班型</option>").appendTo("#classType");                $("<option>大学英语四级VIP全程班</option>").appendTo("#classType");                $("<option>大学英语四级精品全程班</option>").appendTo("#classType");            } else if (value == 2) {                $("<option value=''>请选择班型</option>").appendTo("#classType");                $("<option>大学英语六级VIP全程班</option>").appendTo("#classType");                $("<option>大学英语六级精品全程班</option>").appendTo("#classType");            }        })    });</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> 

<script type="text/javascript">    function del() {         if(confirm("确定删除吗？")){             window.location = "/shaifenUserServletMaintain/-1?_method=updateStatus&ids=" + getIds();         }    }    function shtg() {        window.location = "/shaifenUserServletMaintain/1?_method=updateStatus&ids=" + getIds();    }    function cxsh() {        window.location = "/shaifenUserServletMaintain/2?_method=updateStatus&ids=" + getIds();    }    function getIds() {        var ids = "";        $("input[name='id']").each(function() {            if (this.checked) {                if (ids != "") {                    ids += ",";                }                ids += this.value;            }        });       return ids;    }    $("document").ready(function() {        $("#all").click(function() {            if (this.checked) {                $("input[name='id']").each(function() {                    this.checked = true;                });                $("#qx").text("反选");            } else {                $("input[name='id']").each(function() {                    this.checked = false;                });                $("#qx").text("全选");            }        });    })</script><div class="m1">    <a href="javascript:del()">批量删除</a>&nbsp;&nbsp;    <a href="javascript:shtg()">批量审核通过</a>&nbsp;&nbsp;    <a href="javascript:cxsh()">批量审核不通过</a></div><table width="100%" border="0" cellpadding="0" cellspacing="0" class="tab1 m1" id="tab2">    <tr>        <th width="40">            <span id="qx">全选</span>            <input type="checkbox" id="all" name="all">        </th>        <th width="60" align="center">ID</th>        <th width="60" align="center">userId</th>        <th width="120" align="center">姓名</th>        <th width="100" align="center">级别</th>    </tr>    <c:forEach var="item" items="${list}" varStatus="status">        <tr>            <td align="center"><input type="checkbox" id="id" value="${item.id}" name="id"/></td>            <td align="center">${item.id}</td>            <td>${item.userId}</td>            <td><c:out value="${item.realName}" escapeXml="true"/></td>        </tr>    </c:forEach></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. }) 

    $("document").ready(function() {        $("input:submit").each(function() {            $(this).click(function() {                setdisabled(this,true);                return true;            });        });        function setdisabled(obj) {            setTimeout(function() {                obj.disabled = true;            }, 100);        }    })

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

方案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. }) 

    $("document").ready(function() {        $("#form1").submit(function(){                       setdisabled($("#tj"));        });                function setdisabled(obj) {            setTimeout(function() {                obj.disabled = true;            }, 100);        }    })

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

方案 3：

Java代码

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

                $("document").ready(function() {                    $("#form1").submit(function() {                        $("#tj").attr("disabled","true");                    });                })

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

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> 

            <script type="text/javascript">               var flag_submit = false;                $(document).ready(function() {                    $("#form1").submit(function() {                        if(flag_submit){                           return false;                        }                        flag_submit = true;                    });                })            </script>

• 
• 大小: 10.9 KB

• 
• 大小: 13.5 KB

• 
• 大小: 3.5 KB

• 
• 大小: 28 KB

• 
• 大小: 8.2 KB