jquery表单选择器

最新推荐文章于 2024-01-16 11:20:16 发布

cpf2016

最新推荐文章于 2024-01-16 11:20:16 发布

阅读量379

点赞数

分类专栏： jquery 文章标签： javascript xhtml ViewUI

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

（1）选取表单中所有元素:input

注意：选取的不仅仅是input标签，包括<textarea>、<button>等都会包含

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>:input表单选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>修改全部表单元素的背景色</h3>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <select>
            <option>Option</option>
        </select><br />
        <textarea rows="3" cols="8"></textarea><br />
        <button>
            Button</button><br />
        </form>
        
        <script type="text/javascript">
            $(":input").css("background-color","blue");
        </script>
    </body>
</html>

（2）选取文本框:text

        $(":text").addClass("bg_blue");

（3）选取密码框:password

$(":password").addClass("bg_red");

（4）选取单选框:radio

注意是选取所有的单选框

            $(":radio").attr("disabled","true");

（5）选取复选框:checkbox

注意选取的也是所有复选框

            $(":checkbox").attr("disabled","true");

（6）选取提交按钮:submit

            $(":submit").addClass("bg_red");

（7）选取表单中图片:image

注意只会选取表单中<input type=‘image’>的标签

            $(":image").addClass("bg_red");

（8）选取表单中按钮:button

注意只会选取<input type=‘button’>和<button>的标签，<submit>不会选取

（9）总结

除了input，其他标签直接使用<input>中的type就可以选取

（10）选取选中的单选框、多选框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>:checked选中状态选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    </head>
    
    <body>
        <h3>将处于选中状态的元素设为不可用</h3>
        <form id="frmTest" action="#">
        <input id="Radio1" type="radio" checked="checked" />
        <label id="Label1" for="Radio1">
            苹果</label><br />
        <input id="Radio2" type="radio" />
        <label id="Label2" for="Radio2">
            桔子</label><br />
        <input id="Checkbox1" type="checkbox" checked="checked" />
        <label id="Label3" for="Checkbox1">
            荔枝</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label id="Label4" for="Checkbox2">
            葡萄</label><br />
        <input id="Checkbox3" type="checkbox" checked="checked" />
        <label id="Label5" for="Checkbox3">
            香蕉</label><br />
        </form>
        
        <script type="text/javascript">
            $("#form :checked").attr("disabled", true);
        </script>
    </body>
</html>

（10）选取选中的下拉框

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>:selected选中状态选择器</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>获取处于选中状态元素的内容</h3>
        <form id="frmTest" action="#">
        <select id="Select1" multiple="multiple">
            <option value="0">苹果</option>
            <option value="1" selected="selected">桔子</option>
            <option value="2">荔枝</option>
            <option value="3">葡萄</option>
            <option value="4">香蕉</option>
        </select><br /><br />
        <div id="tip"></div>
        </form>
        
        <script type="text/javascript">
            var $txtOpt = $(":selected").text();
            $("#tip").html("选中内容为:" + $txtOpt);
        </script>
    </body>
</html>