JQuery过滤选择器--表单对象的属性过滤器

最新推荐文章于 2023-07-22 08:42:18 发布

极客研究者

最新推荐文章于 2023-07-22 08:42:18 发布

阅读量325

点赞数

分类专栏： JQuery 文章标签：过滤器 jquery css html5 checkbox

本文链接：https://blog.csdn.net/qq_34550459/article/details/106112432

版权

JQuery 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

表单对象的属性过滤器通过表单元素的状态属性(例如选中、不可用等状态)匹配元素。

过滤器:
:checked 匹配所有被选中的元素
如:$(‘input:checked’)

:disabled 匹配所有不可用元素
:enabled 匹配所有可用元素
:selected 匹配所有被选中的option元素
如:$(‘select option:selected’)

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之表单对象的属性过滤器</title>
    <style>
    select{
        display: block;
        width: 100px;
        height: 90px;
    }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script>
    $(function(){
     $("input[type='checkbox']:checked");//获取被选中的checkbox对象

     $("input:disabled").val('我是不可用的');//为灰色不可用按钮赋值
        
    var lovedCities=$('select option:selected');//获取select下所有被选中的option元素
    for(var i=0;i<lovedCities.length;i++){
        console.log(lovedCities[i].value);
    }

    });
    
    </script>
</head>
<body>
        <form action="">
                爱好:篮球: <input type="checkbox" name="hobbies" checked="checked"/>
                足球: <input type="checkbox" name="hobbies"/>
                橄榄球: <input type="checkbox" name="hobbies" checked="checked"/>
                排球: <input type="checkbox" name="hobbies" checked="checked"/>
                台球: <input type="checkbox" name="hobbies" checked="checked"/><br><br>
        
                性别:
               男: <input type="radio" name="gender" value='male' checked="checked"/> 
               女:<input type="radio" name="gender" value='female'/> <br>
                
               喜欢的城市:<br>
                <select name="cities" id="cities" multiple>
                    <option value="0">南京</option>
                    <option value="1" selected="selected">苏州</option>
                    <option value="2">无锡</option>
                    <option value="3">常州</option>
                    <option value="4" selected="selected">徐州</option>
                </select><br><br>
                <input type="button" value="不可用按钮" disabled="true" />
            </form>
</body>
</html>

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery过滤选择器--表单对象的属性过滤器

表单对象的属性过滤器通过表单元素的状态属性(例如选中、不可用等状态)匹配元素。过滤器::checked 匹配所有被选中的元素如:$(‘input:checked’):disabled 匹配所有不可用元素:enabled 匹配所有可用元素:selected 匹配所有被选中的option元素如:$(‘select option:selected’)Demo:<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫