Blogger Information
Blog 15
fans 0
comment 1
visits 15082
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery表单选择器
空城的博客
Original
963 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery表单选择器</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>
        $(document).ready(function(){
            //1、$(:disabled) 匹配表单中不可用的元素
            $(':disabled').css("background","red");
            //2、$(':enabled') 匹配表单中的可用元素
           // $(':enabled').css("background","yellow");
            //3、$(':selected') 匹配表单中下拉框的选中元素
            $(":selected").css("color","pink");
            //4、$(':checked') 匹配表单中复选框的选中元素 
            $("input:checked").parent().css("color","green");
        })
    </script>
</head>
<body>
    <form action="">
        输入框1<input type="text"><br/>
        输入框2<input type="text" disabled><br/>
        输入框3<input type="text"><br/>
        输入框4<input type="text"><br/>
        星座:
        <select name="" id="">
            <option value="">水瓶座</option>
            <option selected value="">狮子座</option>
            <option value="">双鱼座</option>
            <option value="">摩羯座</option>
        </select>
        <label><input type="checkbox" checked name="keepreal" id="">呵呵</label>
        <label><input type="checkbox" name="keepreal" id="">嘻嘻</label>
        <label><input type="checkbox" name="keepreal" id="">好好</label>
       
    </form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post