表单伪类选择器,指的是专门操作表单元素的一种伪类选择器。在jQuery中,常用的表单伪类选择器如下表所示。
选择器 | 说明 |
---|---|
: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>
浏览器预览效果如图所示。
分析:
$("input:checkbox")
表示选取所有的复选框,attr("checked", "checked")
表示设置复选框的checked属性值为checked,也就是选中所有复选框。对于attr()方法,我们在“5.1 属性操作”一节中会给大家详细介绍,这里了解一下即可。
其他表单伪类选择器的用法跟:checkbox的用法一样,这里就不赘述了,小伙伴们可以自行测试一下。