jquery 操作表單

一. 重置表單

Java代碼

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

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

二. 文本框，文本區域

1：得到值：

Java代碼

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

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

或者：

Java代碼

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

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

2：清空內容

Java代碼

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

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

3：填充內容

Java代碼

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

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

三. 單選框

1：回填賦值

Java代碼

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

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

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

2：獲取單選按鈕的值：

Java代碼

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

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

3：獲取一組名爲(items)的radio被選中項的值*/

Java代碼

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

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

4：設置value=2的項目爲當前選中項:

Java代碼

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

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

5：獲取一組名爲(items)的radio被選中項的值(若未被選中則val() = undefined ):

Java代碼

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

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

6：radio單選組的第二個元素爲當前選中值:

Java代碼

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

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

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

Java代碼

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

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

2:使其未勾選

Java代碼

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

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

勾選

Java代碼

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

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

3:判斷是否已經選中

Java代碼

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

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

五. 下拉框

1:獲取下拉列表的值

Java代碼

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

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

2:回填賦值

Java代碼

<select name="sex" id="sex">
<option value="">請選擇</option>
<option value="0">男</option>
<option value="1">女</option>
</select>

<select name="sex" id="sex">
   <option value="">請選擇</option>
   <option value="0">男</option>
   <option value="1">女</option>
</select>

Java代碼

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

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

方案2：

Java代碼

<select id="prStatCd" name="prStatCd">
<option value="">--請選擇--</option>
<option value="10">新建</option>
<option value="20">確認</option>
<option value="91">否決</option>
</select>

<select id="prStatCd" name="prStatCd">
   <option value="">--請選擇--</option>
   <option value="10">新建</option>
   <option value="20">確認</option>
   <option value="91">否決</option>
</select>

Java代碼

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

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

3：設置value=test的項目爲當前選中項:

Java代碼

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

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

4：添加下拉框的option:

Java代碼

$("<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代碼

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

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

6：獲取select被選中項的文本

Java代碼

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

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

7：select下拉框的第二個元素爲當前選中值:

Java代碼

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

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

例子1

Java代碼

$(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();
});

$(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代碼

考試級別：
<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>

考試級別：
<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代碼

<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>  
<a href="javascript:shtg()">批量審覈通過</a>  
<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>

<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代碼

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

    $("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代碼

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

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

特點：發生在表單驗證邏輯之後，表單驗證不通過，不會觸發。推薦採用

方案 3：

Java代碼

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

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

如果上面方法都不靈就用這個：

Java代碼

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

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