radio\checkbox\select用js\jq获取选中的值

我会带着你远行 2022-06-08 14:12 212阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>获取勾选值</title>
    </head>
    <body>
    <div id="wrap">
      <input type="radio" name="payMethod" value="1"/>男 <input type="radio" name="payMethod" value="2"/>女 </div>
    
    <div class="ch-wrap">
      <input type="checkbox" name="test" value="0"/>0
      <input type="checkbox" name="test" value="1"/>1
      <input type="checkbox" name="test" value="2"/>2
      <input type="checkbox" name="test" value="3"/>3
      <input type="checkbox" name="test" value="4"/>4
      <input type="checkbox" name="test" value="5"/>5
      <input type="checkbox" name="test" value="6"/>6
      <input type="checkbox" name="test" value="7"/>7
      <input type="button" οnclick="jqChk()" value="提 交checkbox"/>
    </div>
    
    <select id="selectDrop" name="">
      <option selected value="1">text1</option>
      <option value="2">text2</option>
    </select>
    <input type="button" οnclick="selectV()" value="提 交select"/>
    
    <script type="text/javascript" src="../jquery_min/jquery-3.0.0.min.js"></script>
    <script>
      //radio获取选中的值
      var val_payPlatform = $('#wrap input[name="payMethod"]:checked ').val();
      $("#wrap input").change(function () {
    //    $('input[name="testradio"]:checked').val();
    //    $('input:radio:checked').val();
    //    $('input[@name="testradio"][checked]');
    //    $('input[name="testradio"]').filter(':checked');
        var val_payPlatform = $('#wrap input[name="payMethod"]:checked ').val();
        console.log(3333, val_payPlatform);
      });
    
      //checkbox获取选中的值
      function chk() {
        var obj = document.getElementsByName('test'); //选择所有name="'test'"的对象，返回数组
        //取到对象数组后，我们来循环检测它是不是被选中
        var s = '';
        for (var i = 0; i < obj.length; i++) {
          if (obj[i].checked) s += obj[i].value + ','; //如果选中，将value添加到变量s中
        }
        //那么现在来检测s的值就知道选中的复选框的值了
        console.log(s == '' ? '你还没有选择任何内容！' : s);
      }
      function jqChk() { //jquery获取复选框值
        var chk_value = [];
        $('input[name="test"]:checked').each(function () {
          chk_value.push($(this).val());
        });
        console.log(chk_value.length == 0 ? '你还没有选择任何内容！' : chk_value);
      }
    
    //select获取值
      function selectV() {
    
    //js获取
    //    var selectDrop = document.getElementById("selectDrop");
    //    var index = selectDrop.selectedIndex;
    //    var sv = selectDrop.options[index].value;
    //    var st = selectDrop.options[index].text;
    //    console.log(999,sv+" "+st);
    //jq获取
        var selected = $("#selectDrop option:selected");
        var sv = selected.val();
        var st = selected.text();
            console.log(999,sv+" "+st);
    
      }
    
    </script>
    </body>
    </html>