<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//重置表單元素
$(":reset").click(function(){
setTimeout(function() {
countChecked();
$("select").change();
},0);
});
//對表單內 可用input 賦值操作.
$('#btn1').click(function(){
$("#form1 input:enabled").val("這里變化了！");
return false;
})
//對表單內 不可用input 賦值操作.
$('#btn2').click(function(){
$("#form1 input:disabled").val("這里變化了！");
return false;
})
//使用:checked選擇器，來操作多選框.
$(":checkbox").click(countChecked);
function countChecked() {
var n = $("input:checked").length;
$("div").eq(0).html("<strong>有"+n+" 個被選中!</strong>");
}
countChecked();//進入頁面就調用.
//使用:selected選擇器，來操作下拉列表.
$("select").change(function () {
var str = "";
$("select :selected").each(function () {
str += $(this).text() + ",";
});
$("div").eq(1).html("<strong>你選中的是："+str+"</strong>");
}).trigger('change');
// trigger('change') 在這里的意思是：
// select加載后，馬上執行onchange.
// 也可以用.change()代替.
});
</script>
</head>
<body>
<h3> 表單對象屬性過濾選擇器.</h3>
<form id="form1" action="#">
<button type="reset">重置所有表單元素</button>
<br /><br />
<button id="btn1">對表單內 可用input 賦值操作.</button>
<button id="btn2">對表單內 不可用input 賦值操作.</button><br /><br />
可用元素：<input name="add" value="可用文本框"/> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多選框：<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div></div>
<br/><br/>
下拉列表1：<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2：<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>廣州</option>
<option>湖北</option>
</select>
<br/><br/>
<div></div>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 個（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 個（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 個（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 個（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 個（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 個（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 個（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 個（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 個（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 個（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 個（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 個（ textarea 元素）<br/>")
.append(" 表單有 " + $inputs.length + " 個（input）元素。<br/>")
.append(" 總共有 " + $AllInputs.length + " 個(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
});
</script>
</head>
<body>
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><div style="display:none">test</div><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>
<div></div>
</body>
</html>