概述
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#dv-2 {
width: 200px;
height: 230px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Arial;
font-family: Verdana;
}
</style>
<script src="Scripts/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function () {
//对表单内可用的input元素赋值操作
$("#Button2").on("click", function () {
$(":text:enabled").val("可用");
});
//对表单内不可用的input元素赋值操作
$("#Button3").click(function () {
$(":text:disabled").val("不可用");
});
//计算有多少个多选框被选中，并显示在div中
$(":checkbox").change(function () {
var cher= $(":checkbox:checked").length
$("#dv-2").text("有"+cher+"个多选框被选中了");
});
//在div中显示选择的下拉框中的选项
$("select").change(function () {
var sele = "";
$("select option:selected").each(function (index, docxml) {
sele += $(docxml).text();
$(".one").html ("<p>你选中的人是" + sele + "，</p>");
})
});
});
</script>
<meta charset="utf-8" />
</head>
<body>
<div>
<p>表单对象属性过滤选择器</p><br />
<input id="Button1" type="button" value="重置所有表单元素" /><br />
<input id="Button2" type="button" value="对表单内可用的input元素赋值操作" />
<input id="Button3" type="button" value="对表单内不可用的input元素赋值操作" /><br />
可用元素：<input id="Text1" type="text" value="可用文本框" /><br />
不可用元素：<input id="Text2" type="text" value="不可用文本框" disabled="disabled" /><br />
可用元素：<input id="Text3" type="text" value="可用文本框" /><br />
不可用元素：<input id="Text4" type="text" value="不可用文本框" disabled="disabled"/> <br />
多选框：
<div >
<table>
<tr>
<td><div id="dv-2"></div></td>
<td>
<input id="Checkbox1" type="checkbox" value="ADC" />ADC
<input id="Checkbox2" type="checkbox" value="辅助"/>辅助
<input id="Checkbox3" type="checkbox" value="法师"/>法师
<input id="Checkbox4" type="checkbox" value="打野"/>打野
<input id="Checkbox5" type="checkbox" value="战士"/>战士
<br />
下拉列表：<br />
<select id="Select1" multziple style="max-height:100px;">
<option>女警</option>
<option>金克斯</option>
<option>E2</option>
<option>奥巴马</option>
<option>飞机</option>
<option>寒冰</option>
</select><br />
下拉列表辅助：<br />
<select id="Select2">
<option>机器人</option>
<option>机器人1</option>
<option>机器人2</option>
<option>机器人3</option>
<option>机器人4</option>
</select><br />
</td>
</tr>
<tr>
<td><div id="dv-2" class="one"></div></td>
<td></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
最后
以上就是单薄御姐为你收集整理的jQuery选择器——表单过滤器的全部内容，希望文章能够帮你解决jQuery选择器——表单过滤器所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复