菜鸟教程
教程 jquery tutorial

表单选择器

jQuery 提供丰富的表单选择器，方便开发者操作各种表单控件，实现数据验证和交互功能。

常用表单选择器

  • :input — 选中所有表单元素（input、select、textarea、button）
js 
  $(":input");
  • :text — 选中所有文本框
js 
  $(":text");
  • :password — 选中所有密码框
js 
  $(":password");
  • :checkbox — 选中所有复选框
js 
  $(":checkbox");
  • :radio — 选中所有单选框
js 
  $(":radio");
  • :checked — 选中所有被选中的复选框或单选框
js 
  $(":checked");
  • :file — 选中所有文件上传控件
js 
  $(":file");

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 选中所有文本框，设置边框颜色
    $(":text").css("border", "2px solid blue");
    // 选中所有被选中的复选框，显示提示
    $(":checkbox:checked").each(function () {
      console.log("选中的复选框值：" + $(this).val());
    });
    // 点击按钮时，显示选中的单选框值
    $("#btn").click(function () {
      alert("选中的单选框值：" + $(":radio:checked").val());
    });
  });
</script>

<form>
<input type="text" placeholder="文本框" /><br />
<input type="password" placeholder="密码框" /><br />
<input type="checkbox" value="A" checked /> 选项A<br />
<input type="checkbox" value="B" /> 选项B<br />
<input type="radio" name="gender" value="男" checked /> 男<br />
<input type="radio" name="gender" value="女" /> 女<br />
<button type="button" id="btn">显示选中单选框值</button>
</form>

相关内容