jQuery操作：input、radio、checkbox、select

jQuery 操作

radio

文本

<input type="radio" value="0" name="sex" id="male"/>男
<input type="radio" value="1" name="sex" id="female"/>女
<input type="radio" value="2" name="sex" id="unknown"/>保密

操作

// 选中第一个
$("input[name='sex']:first").prop("checked", "checked");
$("input[name='sex']:first").prop("checked", true);
$("input[name='sex']:eq(0)").prop("checked", "checked"); // 使用索引值
$("input[name='sex']").get(0).checked = true;

// 选中最后一个
$("input[name='sex']:last").prop("checked", "checked");
$("input[name='sex']").get(2).checked = true;

// 被选中的Value
$("input[name='sex']:checked").val();

// 设置选中
$("#male").prop("checked", "checked");
$("#male").prop("checked", true);
// 移除选中
$("#male").removeAttr("checked");
$("#male").prop("checked", false);

checkbox

操作

// 多数操作同 radio，也是用 checked 属性。
// 但多选时
$('input[name='sex']).eq(0,1,2).prop('checked', 'true'); // 选中前三个
$('input[name='sex']').slice(0,2).prop('checked','true'); // 选中第一个、第二个

// 遍历checkbox
$('input:checkbox').each(function (index, domEle) {
    $(this).prop('checked', true); // 全部选中
    $(this).prop('checked', false); // 全部取消
});

select

// 选中 value='a' 的 option
$("#id").val("a");
// 选中 text='文本' 的 option
$("#id").find("option[text='文本']").prop("selected", true);

// 获取当前选中项的value
$("#id").val();
// 获取当前选中项的text
$("#id").find("option:selected").text();

// 常见级联
$("#id1").on("change", function(){
    // 先清空第二个
    $("#id2").empty();

    // 实际的应用中，这里的option一般都是用循环生成多个了
    var option = $("<option>").val(1).text("pxx");
    $("#id2").append(option);
});

textarea 文本域

// 设值
$("#id").val("文本域");
// 取值
$("#id").val();