• 获取或设置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>
  • 相关阅读:
    每日一道 LeetCode (11):外观数列
    每日一道 LeetCode (10):搜索插入位置
    每日一道 LeetCode (9):实现 strStr()
    每日一道 LeetCode (8):删除排序数组中的重复项和移除元素
    每日一道 LeetCode (7):合并两个有序链表
    每日一道 LeetCode (6):有效的括号
    Python 图像处理 OpenCV (16):图像直方图
    每日一道 LeetCode (5):最长公共前缀
    每日一道 LeetCode (4):罗马数字转整数
    每日一道 LeetCode (3):回文数
  • 原文地址:https://www.cnblogs.com/slwangzi/p/5981188.html
Copyright © 2020-2023  润新知