博客列表 >jquery表单选择器

jquery表单选择器

空城的博客
空城的博客原创
2019年04月06日 10:24:39959浏览

实例

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

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议