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

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>EZoption>
            <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>

JQuery选择器 表单对象属性过滤选择器_第1张图片

JQuery部分

<script src="Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        //
        $(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>

你可能感兴趣的:(JQuery,HTML)