JQuery操作三大控件(下拉,单选,复选)的方法

JQuery是一种流行的JavaScript库，提供了丰富的API和方法来简化JavaScript编程。在Web开发中，下拉框、单选框和复选框是非常常见的控件，JQuery提供了方便的方法来操作这些控件。以下是“JQuery操作三大控件(下拉,单选,复选)的方法”完整攻略：

操作下拉框

获取下拉框选中的值

可以使用 .val() 方法获取下拉框当前选中的值。

示例代码：

// HTML
<select id="select1">
  <option value="1">选项1</option>
  <option value="2" selected>选项2</option>
  <option value="3">选项3</option>
</select>

// JavaScript
var selected = $('#select1').val();
console.log(selected); // "2"

设置下拉框选中的值

同样使用 .val() 方法，只需要将需要设置的值作为参数传入即可。

示例代码：

// HTML
<select id="select2">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

// JavaScript
$('#select2').val('3');

操作单选框和复选框

获取单选框和复选框的选中状态

可以使用 .prop('checked') 方法获取单选框和复选框的选中状态。

示例代码：

// HTML
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女

<input type="checkbox" id="checkbox1" checked> 选项1
<input type="checkbox" id="checkbox2"> 选项2

// JavaScript
var gender = $('input[name="gender"]:checked').val();
console.log(gender); // "male"

var checked1 = $('#checkbox1').prop('checked');
var checked2 = $('#checkbox2').prop('checked');
console.log(checked1, checked2); // true, false

设置单选框和复选框的选中状态

同样使用 .prop('checked', value) 方法，将需要设置的选中状态作为参数传入即可。

示例代码：

// HTML
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

<input type="checkbox" id="checkbox3"> 选项3
<input type="checkbox" id="checkbox4"> 选项4

// JavaScript
$('input[name="gender"]').prop('checked', false);
$('#checkbox3').prop('checked', true);