一 介绍
表单对象的属性过滤器通过表单元素的状态属性(例如选中、不可用等状态)匹配元素,包括
:checked
过滤器、
:disabled
过滤器、
:enabled
过滤器和
:selected
过滤器
4
种。
过滤器 | 说明 | 示例 |
:checked | 匹配所有选中的被选中元素 | $("input:checked") //匹配checked属性为checked的input元素 |
:disabled | 匹配所有不可用元素 | $("input:disabled") //匹配disabled属性为disabled的input元素 |
:enabled | 匹配所有可用的元素 | $("input:enabled ") //匹配enabled属性为enabled的input元素 |
:selected | 匹配所有选中的option元素 | $("select option:selected") //匹配select元素中被选中的option |
利用表单过滤器匹配表单中相应的元素
三 代码
<script language="javascript" src="JS/jquery-3.1.1.min.js"></script> <form> 复选框1: <input type="checkbox" checked="checked" value="复选框1"/> 复选框2: <input type="checkbox" checked="checked" value="复选框2"/> 复选框3: <input type="checkbox" value="复选框3"/><br /> 不可用按钮: <input type="button" value="不可用按钮" disabled><br /> 下拉列表框: <select οnchange="selectVal()"> <option value="列表项1">列表项1</option> <option value="列表项2">列表项2</option> <option value="列表项3">列表项3</option> </select> </form> <script type="text/javascript"> $(document).ready(function() { $("input:checked").css("background-color","red"); //设置选中的复选框的背景颜色 $("input:disabled").val("我是不可用的"); //为灰色不可用按钮赋值 }) function selectVal(){ //下拉列表框变化时执行的方法 alert($("select option:selected").val()); //显示选中的值 } </script>
四 运行效果