jQuery表单对象属性过滤选择器

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

原创最新推荐文章于 2021-03-30 22:33:58 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery表单对象属性过滤选择器

jQuery 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用jQuery操作表单元素的例子，包括通过属性过滤选择器对表单内的输入框进行操作，如设置值、获取选中状态等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery表单对象属性过滤选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单对象属性过滤选择器</title>
    <meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(function () {
            //重置表单元素
            $(":reset").click(function () {
                setTimeout(function () {
                    countChecked();
                    $("select").change();
                }, 0);
            });

            //对表单内 可用input 赋值操作.
            $('#btn1').click(function () {
                $("#form1 input:enabled").val("可用input");
                return false;
            });
            //对表单内 不可用input 赋值操作.
            $('#btn2').click(function () {
                $("#form1 input:disabled").val("不可用input");
                return false;
            });
            //使用:checked选择器，来操作多选框.
            $(":checkbox").click(countChecked);
            function countChecked() {
                var n = $("input:checked").length;
                $("div").eq(0).html("<strong>有" + n + " 个多选框被选中!</strong>");
            };
            countChecked();//进入页面就调用.

            //使用:selected选择器，来操作下拉列表.
            $("select").change(function () {
                var str = "";
                $("select :selected").each(function () {
                    str += $(this).text() + ",";
                });
                $("div").eq(1).html("<samp>你选中的是：" + str + "</samp>");
            }).trigger('change');
            // trigger('change') 在这里的意思是：
            // select加载后，马上执行onchange.
            // 也可以用.change()代替.
        });
    </script>
</head>
<body>
    <h3> 表单对象属性过滤选择器.</h3>
    <form id="form1" action="#">
        <button type="reset">重置所有表单元素</button>
        <br />
        <button id="btn1">对表单内 可用input 赋值操作.</button>
        <button id="btn2">对表单内 不可用input 赋值操作.</button>
        <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" value="test1" />ADC
        <input type="checkbox" name="newsletter" value="test2" />辅助
        <input type="checkbox" name="newsletter" value="test3" />法师
        <input type="checkbox" name="newsletter" value="test4" />打野
        <input type="checkbox" name="newsletter" value="test5" />战士//展示多选框中的个数
        <div style="width:200px;height: 240px;background-color:darkgray;float:left;"></div>
        <br />
        <br />
        下拉列表1：<br />
        <select name="test" multiple="multiple" style="height:100px">
            <option>女警</option>
            <option>金克斯</option>
            <option>EZ</option>
            <option>奥巴马</option>
            <option>飞机</option>
            <option>寒冰</option>
        </select>
        <br />
        <br />
        下拉列表2：<br />
        <select name="test2">
            <option>机器人</option>
            <option>机器人</option>
            <option>机器人</option>
            <option>机器人</option>
        </select>
        <br />
        <br />
        <div style="width:200px;height: 230px;background-color:darkgray;"></div>
    </form>
</body>
</html>