jquery表单对象的属性过滤器

表单对象属性过滤器

最新推荐文章于 2024-04-05 12:11:45 发布

最新推荐文章于 2024-04-05 12:11:45 发布 · 269 阅读

文章标签：

#jquery #表单对象 #属性过滤器 #ViewUI

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

一介绍

表单对象的属性过滤器通过表单元素的状态属性（例如选中、不可用等状态）匹配元素，包括: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 onchange="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>

四运行效果