jQuery操作：input、radio、checkbox、select

分手后的思念是犯贱 2022-05-27 03:49 205阅读 0赞

# 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();