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

最新推荐文章于 2021-06-27 10:55:16 发布

域·羽灵言

最新推荐文章于 2021-06-27 10:55:16 发布

阅读量272

点赞数

分类专栏： JQuery HTML 文章标签： jquery

本文链接：https://blog.csdn.net/YuYuLingYan/article/details/107816137

版权

JQuery 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

HTML部分

<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="可用文本框" id="textadd" />  <br />
        不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
        可用元素： <input name="che" value="可用文本框" /><br />
        不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br />
        多选框：<br />
        <input type="checkbox" name="newsletter" checked="checked" value="test1" />ADC
        <input type="checkbox" name="newsletter" value="test2" />辅助
        <input type="checkbox" name="newsletter" value="test3" />法师
        <input type="checkbox" name="newsletter" checked="checked" value="test4" />打野
        <input type="checkbox" name="newsletter" value="test5" />战士
        <br />展示多选框选中的个数<div></div><br /><br />
        下拉列表ADC：<br />
        <select name="test" multiple="multiple" style="height:100px">
            <option>女警</option>
            <option selected="selected">金克斯</option>
            <option>EZ</option>
            <option selected="selected">奥巴马</option>
            <option>飞机</option>
            <option>寒冰</option>
        </select><br /><br />
        下拉列表辅助：<br />
        <select name="test2">
            <option>宝石</option>
            <option>风女</option>
            <option selected="selected">机器人</option>
            <option>唤潮鲛姬</option>
            <option>众星之子</option>
            <option>琴女</option>
        </select><br /><br />
        <div>
            <label id="lable1"></label>
            <label id="lable2"></label>
        </div>
    </form>
</body>

HTML效果图

JQuery部分

<script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            $("#btn1").on("click", function () {
                $("input[value='可用文本框']").val("文本改变");

            })
            $("#btn2").on("click", function () {
                $("input[value='不可用文本框']").val("1000");

            })
            $("select").on("click", function () {
                var a = $("[name='test']").find("option:selected").text();
                $("#lable1").text("ADC："+a);
                var b = $("[name='test2']").find("option:selected").text();
                $("#lable2").text("辅助："+b);
            })
        });
                        //]]>
    </script>

域·羽灵言

关注

0
点赞
踩
0

收藏

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

HTML部分<body> <h3> 表单对象属性过滤选择器.</h3> <form id="form1" action="#"> <button type="reset">重置所有表单元素</button> <br /><br /> <button id="btn1">对表单内可用input 赋值操作.</button>
复制链接

扫一扫