jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

jQuery操作表单元素的完整攻略

下拉列表

操作下拉列表元素需要用到jQuery的选择器和方法。通过选择器选中指定的下拉列表元素，然后对其进行相应操作，例如动态添加、删除、修改选项等。下面是一个简单的例子：

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

// 给下拉列表添加一个选项
$('#mySelect').append('<option value="5">选项5</option>');

// 修改选项值
$('#mySelect option[value="4"]').val('4A');

// 删除选项
$('#mySelect option[value="3"]').remove();

文本框

操作文本框元素同样需要用到jQuery的选择器和方法。对文本框进行操作的方法有很多，例如获取和设置文本框的值，禁用和启用表单元素等。下面是一个例子：

<input type="text" id="myInput" value="默认值" />

<button id="btnDisable">禁用</button>
<button id="btnEnable">启用</button>

// 获取文本框的值
var value = $('#myInput').val();
console.log(value); // 输出：默认值

// 设置文本框的值
$('#myInput').val('新的值');

// 禁用和启用表单元素
$('#btnDisable').on('click', function() {
  $('#myInput').prop('disabled', true);
});

$('#btnEnable').on('click', function() {
  $('#myInput').prop('disabled', false);
});

复选框和单选框集合

复选框和单选框集合可以通过name属性选择，也可以通过类名(class)选择。对于复选框元素，需要选中所有选中的复选框，对于单选框集合，则只需要选中所选的单选框元素即可。

<input type="checkbox" name="myCheckbox" value="1" />选项1
<input type="checkbox" name="myCheckbox" value="2" />选项2
<input type="checkbox" name="myCheckbox" value="3" />选项3

<input type="radio" name="myRadio" value="1" />选项1
<input type="radio" name="myRadio" value="2" />选项2
<input type="radio" name="myRadio" value="3" />选项3

// 选中所有选中的复选框
$('input[name="myCheckbox"]:checked').each(function() {
  console.log($(this).val());
});

// 选中所选的单选框元素
$('input[name="myRadio"]:checked').val();

示例1：动态添加选项

下面是一个通过点击按钮动态添加选项的例子。代码片段演示了如何动态添加选项并且将新选项设置为默认选项：

<select id="mySelect">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

<button id="btnAddOption">添加选项</button>

$('#btnAddOption').on('click', function() {
  // 获取新选项的值和文本内容
  var optionValue = $('#mySelect option').length + 1;
  var optionText = '选项' + optionValue;

  // 动态添加选项
  $('#mySelect').append('<option value="' + optionValue + '">' + optionText + '</option>');

  // 设置新选项为默认选项
  $('#mySelect option:last').prop('selected', true);
});

示例2：计算选中复选框的个数

下面是一个计算选中复选框的个数的例子。代码片段演示了如何使用jQuery选择器选中所有选中的复选框，然后统计个数并进行展示：

<input type="checkbox" name="myCheckbox" value="1" />选项1
<input type="checkbox" name="myCheckbox" value="2" />选项2
<input type="checkbox" name="myCheckbox" value="3" />选项3

<div id="result"></div>

$('input[name="myCheckbox"]').on('change', function() {
  // 统计选中的复选框个数
  var count = $('input[name="myCheckbox"]:checked').length;

  // 显示结果
  $('#result').text('已选中' + count + '项');
});

以上就是jQuery操作下拉列表、文本框、复选框、单选框集合（收藏）的完整攻略，希望能对您有所帮助。