实例:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107<!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选择器——表单过滤器内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复