【JavaScript】select、radio、checkbox 选中与获取值

最新推荐文章于 2022-04-27 15:31:18 发布

meichaoWen

最新推荐文章于 2022-04-27 15:31:18 发布

阅读量166

点赞数

分类专栏： JS实例文章标签： js checkbox javascript

本文链接：https://blog.csdn.net/meichaoWen/article/details/112725903

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

checkbox

判断是否选中

<body>
    <input type="checkbox" id="oCh">
    <script>
    //jQuery
        $('#oCh').is(':checked') //false、true
        $('#oCh').prop('checked') //false、true
        $('#oCh').attr('checked') //jQ版本1.6+返回 undefined、checked
        $('#oCh').attr('checked') //jQ版本1.6之前返回 false、true
    </script>
    <script>
      //原生js
          var oCh = document.getElementById('oCh');
          if(oCh.checked) //返回false、true
    </script>
</body>

设置、取消选中

$('#oCh').attr('checked',true) //取消 false
$('#oCh').removeAttr('checked')
$('#oCh').prop('checked',true) //取消 false
<script>
  //原生js
      var oCh = document.getElementById('oCh');
      oCh.checked = true
</script>

radio

判断是否选中

<div>
    <input type="radio" id="oCh" name="age" value="01">
    <input type="radio" id="oCh2" name="age" value="02">
</div>
<script>
    $('input[name="age"]:checked').val() //01、02、undefined
    $('input[name="age"]').attr('checked') //checked、undefined
    $('input[name="age"]:checked').length //0、1
</script>
<script>
      //原生js
          var oCh = document.getElementById('oCh');
          if(oCh.checked) //返回false、true
</script>

设置选中

$('input[name="age"]').eq(0).attr('checked','true') //通过eq
$('input[name="age"][value="022"]').attr('checked','true') //通过value
<script>
  //原生js
      var oCh = document.getElementById('oCh');
      oCh.checked = true
</script>

select

获取选中的值

<select id="oCh">
    <option>01</option>
    <option>02</option>
</select>
<script>
    $('#oCh').val() //01
    $('#oCh option:selected').text() //01
    $('#oCh').find('option:selected').text() //01
</script>

设置选中

<script>
    $('#oCh').val('02') //设置02选中
    $('#oCh').find('option:contains("02")').attr('selected',true)
</script>

meichaoWen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】select、radio、checkbox 选中与获取值

判断是否选中<body> <input type="checkbox" id="oCh"> <script> //jQuery $('#oCh').is(':checked') //false、true $('#oCh').prop('checked') //false、true $('#oCh').attr('checked') //jQ版本1.6+返回 undefined、checked
复制链接

扫一扫