jQuery选择器过滤选择器(六.表单对象属性过滤选择器)

最新推荐文章于 2021-03-30 22:33:58 发布

张大仙是个妖怪

最新推荐文章于 2021-03-30 22:33:58 发布

阅读量516

点赞数 2

分类专栏： # jQuery选择器和DOM操作文章标签： jQuery 选择器

本文链接：https://blog.csdn.net/NDKHBWH/article/details/56285753

版权

jQuery选择器和DOM操作专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquerysource/jquery.js" type="text/javascript"></script>
    <!-- <link rel="stylesheet" type="text/css" href="../css/style.css"/>-->
    <script>
        $(document).ready(function(){
            //重置表单元素
            $(":reset").click(function(){
                setTimeout(function() {
                    countChecked();
                    $("select").change();
                },0);
            });

        //1:enabled选取所有可用元素;$("#form1 :enabled"),选取id为"form1"的表单内的所有可用元素
        //2:disabled选取所有不可用元素;$("#form2 :disabled"),选取id为"form2"的表单内的所有不可用元素
        //3:checked;选取所有被选中的元素(单选框,复选框);$("input:checked");选取所有被选中的input元素
        //4:selected;选取所有被选中的选项元素(下拉列表);$("select option:selected")选取所有被选中的选项元素
                  //对表单内 可用input 赋值操作.
                    $("#btn1").click(function(){
                        $("#form1 input:enabled").val("可见元素改变了");
                        return false;
                    });
                  //对表单内 不可用input 赋值操作.
                    $("#btn2").click(function(){
                        $("#form1 input:disabled").val("不可见元素改变了");
                        return false;
                    });
                 //进来就进行统计
                  countChecked();
                 //使用:checked选择器，来操作多选框.
                    $(":checkbox").click(countChecked);
                    function countChecked(){
                        var n = $("input:checked").length;
                        $("div").eq(0).html("<strong>有"+n+"个被选中!</strong>")
                    }
                  //使用:selected选择器，来操作下拉列表.
                    $("select").change(function(){
                        var str="";
                        $("select :selected").each(function(){
                            str+=$(this).text()+",";
                        });
                        $("div").eq(1).html("<strong>你选中的是"+str+"</strong>")
                    }).trigger('change');
            // trigger('change') 在这里的意思是：
            // select加载后，马上执行onchange.
            // 也可以用.change()代替.
        });
    </script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<form id="form1" action="#">
    <button type="reset">重置所有表单元素</button>
    <br /><br />
    <button id="btn1">对表单内 可用input 赋值操作.</button>
    <button id="btn2">对表单内 不可用input 赋值操作.</button>

    <br /><br />

    <!-- 测试的元素 -->

    可用元素：<input name="add" value="可用文本框"/>  <br/>
    不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
    可用元素： <input name="che" value="可用文本框" /><br/>
    不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
    <br/>
    多选框：<br/>
    <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
    <input type="checkbox" name="newsletter" value="test2" />test2
    <input type="checkbox" name="newsletter" value="test3" />test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
    <input type="checkbox" name="newsletter" value="test5" />test5
    <div></div>

    <br/><br/>
    下拉列表1：<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected="selected">湖南</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>

    <br/><br/>
    下拉列表2：<br/>
    <select name="test2" >
        <option>浙江</option>
        <option>湖南</option>
        <option selected="selected">北京</option>
        <option>天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <br/><br/>

    <div></div>
</form>
</body>
</html>

张大仙是个妖怪

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器过滤选择器(六.表单对象属性过滤选择器)

--> $(document).ready(function(){ //重置表单元素 $(":reset").click(function(){ setTimeout(function() { countChecked();
复制链接

扫一扫