jQuery操作select、单选框及复选框教程

本文主要介绍了如何使用jQuery来操作HTML中的`select`元素，包括添加、移除`option`，获取选中值，以及对单选框和复选框的操作。 在jQuery中，对`select`下拉框进行操作非常方便。例如，如果你想要向某个ID为`id`的`select`元素追加一个新的`option`，可以使用`append()`方法： ```javascript $("#id").append("<option value='value'>Text</option>"); ``` 如果你想在`select`的开头插入一个`option`，则可以使用`prepend()`方法： ```javascript $("#id").prepend("<option value='0'>Text</option>"); ``` 移除`option`时，可以遍历`select`的所有`option`，检查它们的值并移除匹配项： ```javascript $("#ID option").each(function() { if ($(this).val() == 111) { $(this).remove(); } }); ``` 或者，如果你想根据`option`的文本内容移除，可以这样做： ```javascript $("<option value='111'>UPS Ground</option>").appendTo($("#ID")).remove(); ``` 获取`select`的选定值有多种方式，例如： ```javascript $("#testSelect option:selected").text(); // 获取选中项的文本 $("#testSelect").find("option:selected").text(); // 同上 $("#testSelect").val(); // 获取选中项的value值 ``` 如果你想根据`option`的`value`设置选中状态，可以使用`val()`方法： ```javascript $("#testSelect").val("111"); ``` 对于单选框的操作，你可以这样获取选中项的值： ```javascript $("input[type=radio][checked]").val(); ``` 设置特定单选框为选中状态： ```javascript $("input[type=radio][value=2]").attr("checked", "checked"); ``` 处理复选框时，获取选中的第一个值： ```javascript $("input[type=checkbox][checked]").val(); ``` 如果需要循环输出所有选中的复选框值： ```javascript $("input[type=checkbox][checked]").each(function() { alert($(this).val()); }); ``` 对复选框进行勾选或取消勾选： ```javascript $("#chk1").attr("checked", ""); // 不打勾 $("#chk2").attr("checked", true); // 打勾 ``` 判断复选框是否已被勾选： ```javascript if ($("#chk1").attr('checked') == undefined) {} ``` jQuery的选择器非常强大，能实现更复杂的选择和操作，如通过类名、属性等进行筛选。以上只是基本操作，实际应用中可以根据需求结合其他jQuery方法进行更细致的控制。