js如何获取checkbox被选中的值?

准备知识

javascript dom 常用方式

document.getElementById	返回给定id属性值的米素节点相对应的工具
document.getElementsByTagName	返回给定name属性的米素节点对应的米素聚集	var hobbies = document.getElementsByName(“hobbies”);
element.nextSibling	返回该米素紧跟的一个节点
nodeValue	获取节点中的文本值 ,例如：跑步	跑步

数组常用方式：

arrayObject.length	属性：数组长度
arrayObject.push()	向数组末尾添加一个或多个米素	var arr = new Array(3) arr[0] = “George” arr[1] = “John” arr[2] = “Thomas”

页面如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript获取复选框值方式</title>
</head>

<body>
    <p>
        <input type="checkbox" name="hobbies" id="hobbies" class="hobbies" value="1">游泳
        <input type="checkbox" name="hobbies" id="hobbies" class="hobbies" value="2">跑步
    </p>

    <p>
        <button id="btn1">获取复选框值</button>
    </p>
 </body>

</html>

方式一

通过复选框的name属性,遍历后将被选中的复选框的值输出

checkbox[index].nextSibling.nodeValue: 获取的是checkbox中标签包裹的文本值

function get_checkbox_val() {
          var hobbies = document.getElementsByName("hobbies");
          for (let index = 0; index < hobbies.length; index++) {
              if (hobbies[index].checked) {
                  alert(hobbies[index].value + "," + hobbies[index].nextSibling.nodeValue);
              }

          }
  }

方式二

确立一个数组,使用push 方式将被选中的米素保存到数组

function get_checkbox_val_with_array() {
          var arr = [];
          for (let index = 0; index < hobbies.length; index++) {
              if (hobbies[index].checked) {
                  arr.push(hobbies[index].value);
              }
          }
          alert(arr);
  }

方式三

通过class选择器获取被选中的复选框的值

function get_checkbox_val_with_selector() {
         var hobbies = document.getElementsByClassName('hobbies');
         for (let index = 0; index < hobbies.length; index++) {
             if (hobbies[index].checked) {
                 checkedValue = hobbies[index].value;
                 alert(hobbies[index].value + "," + hobbies[index].nextSibling.nodeValue);
             }
         }
     }

使用jquery

需要引入jquery,这里我使用海内的cdn

jquery中通过each() 方式遍历所有被选中的复选框的值

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
         $('#btn1').click(function () {
            $("input[name='hobbies']:checked").each(function () {
                alert($(this).val());
            });
        });
    </script>
     
</script>

tips:$(“input[name=’xxxx’]:checked”) 被选中的复选框工具聚集

原文：https://pinghailinfeng.gitee.io/2019/09/28/javascript-get-checkbox-checked-value/?utm_source=tuicool&utm_medium=referral

思源资源网：分类流动

1.阿里云: 本站现在使用的是阿里云主机，平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各种产物的最新流动，优惠券领取点击进入

3.广告同盟: 整理了现在主流的广告同盟平台，若是你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5561

发表于 2021-03-13 12:44
阅读 ( 226 )
分类：互联网