javascript如何获取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”) 被选中的复选框对象集合