1. 程式人生 > >jQUery選擇器之表單物件屬性篩選選擇器

jQUery選擇器之表單物件屬性篩選選擇器

以下為jQUery選擇器之表單物件屬性篩選選擇器例項用法:
 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-3.3.1.js"></script>
<title>無標題文件</title>
</head>

<body>
    <h2>子元素篩選選擇器</h2>
    <h3>enabled、disabled</h3>
    <form>
        <input type="text" value="未設定disabled" />
        <input type="text" value="設定disabled" 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('checked')
    </script>

    <script type="text/javascript">
         //查詢所有option元素中,有selected屬性被選中的選項
         //移除option的selected屬性
        $('option:selected').removeAttr('selected')
    </script>

</body>
</html>

結果如下: