jQuery表单伪类选择器

“表单”伪类选择器，指的是专门操作表单元素的一种伪类选择器。在 jQuery 中，常用的“表单”伪类选择器如表 1 所示。

表 1：“表单”伪类选择器
选择器	说明
:input	选取所有 input 元素
:button	选取所有普通按钮，即<input type ="button" />
:submit	选取所有提交按钮，即<input type ="submit" />
:reset	选取所有重置按钮，即<input type = "reset" />
:text	选取所有单行文本框
:textarea	选取所有多行文本框
:password	选取所有密码文本框
:radio	选取所有单选框
:checkbox	选取所有复选框
:image	选取所有图片域
:file	选取所有文件域

举例：

复制纯文本复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("input:checkbox").attr("checked", "checked");
        })
    </script>
</head>
<body>
    <p>性别：
        <label><input type="radio" name="gendar"/>男</label>
        <label><input type="radio" name="gendar"/>女</label>
    </p>
    <p>喜欢的水果：
        <label><input type="checkbox"/>苹果</label>
        <label><input type="checkbox"/>西瓜</label>
        <label><input type="checkbox"/>蜜桃</label>
    </p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function() {
            $("input:checkbox").attr("checked", "checked");
        })
    </script>
</head>
<body>
    <p>性别：
        <label><input type="radio" name="gendar"/>男</label>
        <label><input type="radio" name="gendar"/>女</label>
    </p>
    <p>喜欢的水果：
        <label><input type="checkbox"/>苹果</label>
        <label><input type="checkbox"/>西瓜</label>
        <label><input type="checkbox"/>蜜桃</label>
    </p>
</body>
</html>

程序执行效果如图 1 所示。

图 1：:checkbox 选择器的效果

$("input:checkbox") 表示选取所有的复选框，attr("checked","checked") 表示设置复选框的属性值为 checked，也就是选中所有复选框。对于 attr( ) 方法，之后会给大家详细介绍，这里了解一下即可。

其他“表单”伪类选择器的用法和 :checkbox 的用法一样，这里就不赘述了，小伙伴们可以自行测试。

jQuery表单伪类选择器

所有教程

优秀文章