Home >Web Front-end >JS Tutorial >Detailed example of jQuery form object attribute filter selector

Detailed example of jQuery form object attribute filter selector

小云云Original: 2018-05-26 16:44:311660browse

This article mainly brings you an example of the jQuery selector's form object attribute filtering selector. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="imooc.css" rel="external nofollow" type="text/css">
  <style>
  input {
    display: block;
    margin: 10px;
    padding: 10px;
  }
  </style>
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>子元素筛选选择器</h2>
  <h3>enabled、disabled</h3>
  <form>
    <input type="text" value="未设置disabled" />
    <input type="text" value="设置disabled" disabled />
    <input type="text" value="未设置disabled" />
  </form>

  <script type="text/javascript">
    //查找所有input所有可用的（未被禁用的元素）input元素。
    $("input:enabled").css("border", "2px groove red");
  </script>

  <script type="text/javascript">
    //查找所有input所有不可用的（被禁用的元素）input元素。
    $("input:disabled").css("border", "2px groove blue");
  </script>

  <h3>checked、selected</h3>
  <form>
    <input type="checkbox" checked="checked">
    <input type="checkbox">
    <input type="radio" checked>    
    <input type="radio">
    
    <select name="garden" multiple="multiple">
      <option>imooc</option>
      <option selected="selected">慕课网</option>
      <option>aaron</option>
      <option selected="selected">博客园</option>
     </select>

  </form>

  <script type="text/javascript">
     //查找所有input所有勾选的元素(单选框,复选框)
     //移除input的checked属性
    $("input:checked").removeAttr(&#39;checked&#39;)
  </script>

  <script type="text/javascript">
     //查找所有option元素中,有selected属性被选中的选项
     //移除option的selected属性
    $("option:selected").removeAttr(&#39;selected&#39;)
  </script>

</body>

</html>

Note:

In some browsers, the selector:checked may be incorrect The 5a07473c87748fb1bf73f23d45547ab8 element is selected, so to be on the safe side, use the selector input:checked to ensure that only the d5fd7aea971a85678ba271703566ebfd element is selected.

Related recommendations:

Detailed explanation of jquery selector practice

Detailed explanation of jQuery form element selector

Example sharing JQuery selector and DOM node operation practice

The above is the detailed content of Detailed example of jQuery form object attribute filter selector. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of jQuery attribute filter selector usage examplesNext article：Detailed explanation of jQuery attribute filter selector usage examples

See more

Detailed example of jQuery form object attribute filter selector

Related articles