【锋利的jQuery】3、表单对象属性过滤选择器 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>表单对象属性过滤选择器</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 在head中引入jQuery -->
    <script type="text/javascript" src="../../lib/jquery-3.1.1.js"></script>
    <script type="application/javascript">

        $(document).ready(function(){
            //冒号选择器，选中所有reset按钮
            //input:checked 改变表单内可用input元素的值
            function countChecked() {
                var n = $("input:checked").length;
                $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
            }

            $(":reset").click(function(){
                setTimeout(function(){
                    countChecked();
                },0);
            });

            countChecked();//进入页面就调用.

            //对表单类 可用input赋值
            $('#btn1').click(function(){
                $("#form1 input:enabled").val("这里变化了！");
                return false;
            })

            $("#btn2").click(function(){
                $("#form1 input:disabled").val("这里变化了！");
                return false;
            })

            //获取多选框选中的个数
            $(":checkbox").click(countChecked);

            //元素选择
            $("select").change(function () {
//                alert("iiiii");
                //获取所有选中的对象的文本
                var str = "";
                $("select :selected").each(function () {
                    str += $(this).text() + ",";    //遍历素有选中对象
                });
                //展示到页面,选中第二个div（0,1,2,3.。。）
                $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
            }).trigger('change');
            // trigger('change') 在这里的意思是：
            // select加载后，马上执行onchange.
            // 也可以用.change()代替.
        });

    </script>
</head>
<body>
    <h3> 表单对象属性过滤选择器.</h3>
    <form action="#" id="form1">

        <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>安徽</option>
            <option selected="selected">四川</option>
            <option>广州</option>
            <option>河南</option>
        </select>
        <div></div>
    </form>
</body>
</html>

　　

展示：

 

 

 

posted @ 2017-03-24 10:11  cutter_point  阅读(97)  评论(0)    收藏  举报