获取或设置checkbox radio select的值

单选: 

  获取值:$("input[name='rdo']:checked").val();

  设置值:$("input[name='rdo'][value='3']").prop("checked", true)

      $("input[name='rdo']:eq(2)").prop("checked", true)

      $("input[name='rdo']").eq(2).prop("checked", true)

      $("input[name='rdo']").get(2).checked = true

多选:

  获取值:      

function getCheckedValues() {
    var arr = new Array();
    $("input[name='chk']:checked").each(function() {
        arr.push($(this).val());
    });
    return arr.join(",");
}

  设置值:

      $("input[name='chk']").val(["2", "3"])

      $("input[name='chk']").val("2,3".split(","))

select单选:

  获取值:$("#drp").val()    说明:.val()处理select元素, 当没有选择项被选中,它返回null

  设置值:$("#drp").val(3)

select多选:  

  获取值: $("#selectDuo").val() 

  设置值:同上面的多选框

<html>
<head>
    <title></title>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        div {
            padding: 10px;
        }
        hr{border-bottom: solid 1px #ccc;line-height:10px;width:100%}
    </style>
    <script>

        //单选 begin******************************************************************
        //获取单选值
        function getRadioValue() {
            var val = $("#dan input[name='rdo']:checked").val();
            $("#info").html(val);
        }

        //根据值或索引选中
        function setRadioValue() {

            //1.根据值选中radio
            $("#dan input[name='rdo'][value='3']").prop("checked", true);

            //2.根据索引选中radio
            //$("#dan input[name='rdo']:eq(2)").prop("checked", true);

            //3.根据索引选中radio
            //$("#dan input[name='rdo']").eq(2).prop("checked", true);

            //4.根据索引选中radio
            //$("#dan input[name='rdo']").get(2).checked = true;
        }
        //单选 end******************************************************************

        //多选 begin******************************************************************
        //获取多选值,多个以逗号分隔
        function getCheckboxValue() {
            var arr = new Array();
            $("#duo input[name='chk']:checked").each(function () {
                arr.push($(this).val());
            });
            $("#info").html(arr.join(","));
        }
        //设置多选
        function setCheckboxValue() {
            //1.根据数组值选中
            //$("#duo input[name='chk']").val(["2", "3"]);

            //2.根据字符串值选中
            var vals = "2,3"
            $("#duo input[name='chk']").val(vals.split(","));
        }
        //多选 end******************************************************************

        //下拉***********************************************************************
        function getSelectValue() {
            var val = $("#drp").val();
            $("#info").html(val);

            //var val = $("#drp :checked").val();
        }
        //设置多选
        function setSelectValue() {
            var val = $("#drp").val("3");
        }


        //select多选 begin**************************************************************
        function getSelectDuoValue() {

        var val = $("#selectDuo").val();
        $("#info").text(val);

        }
        //设置多选
        function setSelectDuoValue() {
            var val = $("#selectDuo").val(["2","3"]);
        }
        //select多选 end**************************************************************
         
    </script>
</head>
<body>
    <div style="color:#f00">结果:<span id="info" style="height:30px"></span></div>
    <div id="dan">
        <input type="radio" name="rdo" id="radio1" value="1" />1
        <input type="radio" name="rdo" id="radio2" value="2" />2
        <input type="radio" name="rdo" id="radio3" value="3" />3
        <input type="radio" name="rdo" id="radio4" value="4" />4
    </div>
    <div>
        <input type="button" value="获取当前值" onclick="getRadioValue()" />
        <input type="button" value="设置值为3的选中" onclick="setRadioValue()" />
    </div>
    <hr />
    <div id="duo">
        <input type="checkbox" name="chk" id="checkbox1" value="1" />1
        <input type="checkbox" name="chk" id="checkbox2" value="2" />2
        <input type="checkbox" name="chk" id="checkbox3" value="3" />3
        <input type="checkbox" name="chk" id="checkbox4" value="4" />4
    </div>
    <div>
        <input type="button" value="获取当前值" onclick="getCheckboxValue()" />
        <input type="button" value="设置值为2,3的选中" onclick="setCheckboxValue()" />
    </div>
    <hr />
    <div>
        <select id="drp">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div>
        <input type="button" value="获取当前值" onclick="getSelectValue()" />
        <input type="button" value="设置值为3的选中" onclick="setSelectValue()" />
    </div>
    <hr />
    <div>
        <select id="selectDuo" multiple="multiple">
            <option value="1">111111</option>
            <option value="2">222222</option>
            <option value="3">333333</option>
            <option value="4">444444</option>
        </select>
    </div>
    <div>
        <input type="button" value="获取当前值" onclick="getSelectDuoValue()" />
        <input type="button" value="设置值为2,3的选中" onclick="setSelectDuoValue()" />
    </div>
</body>
</html>
原文地址:https://www.cnblogs.com/slwangzi/p/5981188.html