jQuery 操作 checkbox/radio/select：选中判断与取值设置

jQuery 操作表单元素（checkbox、radio、select）是常见需求。下面把最常用的取值与设置整理成可直接套用的片段。

一、checkbox 是否选中

if ($("#is_student").prop("checked")) {   // 推荐用 .prop("checked") 判断
    // 已选中
}

提示：jQuery 1.6 之后属性状态判断推荐 .prop('checked') 或 .is(':checked')，.attr('checked') 在某些版本不可靠。上面示例用 .prop 写法以避开伪类选择器的冒号。

二、radio 选中值

var val = $("input[name=dtype]").filter(":checked").val();  // 获取选中的 radio 值

三、Select 获取 Text / Value / 索引

var sel = $("#select_id");
var checkText  = sel.find("option").filter(":selected").text();   // 选中项文本
var checkValue = sel.val();                                       // 选中项 value
var checkIndex = sel.get(0).selectedIndex;                        // 选中项索引
var maxIndex   = sel.find("option").last().attr("index");         // 最后一项索引

四、追加 / 删除 Option

sel.append("<option value='1'>Text</option>"); // 追加
sel.prepend("<option value='0'>请选择</option>"); // 插入首位
sel.find("option").last().remove();                // 删除最后一项
sel.find("option").eq(0).remove();                   // 删除第一项
sel.find("option[value='3']").remove();           // 按 value 删除
sel.empty();                                      // 清空所有选项

五、设置选中项

// 按 value 选中
sel.val("pxx");
// 按文本选中
sel.find("option").filter(function(){ return $(this).text() === "pxx"; }).prop("selected", true);
// 获取当前选中项的 value / text
var v = sel.val();
var t = sel.find("option").filter(":selected").text();