js怎么获取所有选中的checkbox复选框

2025-09-29 06:56:39

1、新建一个记事本,然后将下述代码复制到里面:

<!doctype html>

<html>

<head>

  <meta charset="gb2312">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>复选框多选</title>

</head>

<body>

  <div>

    <input type="checkbox"  value="1"/><span>红色</span>

    <input type="checkbox"  value="2"/><span>绿色</span>

    <input type="checkbox"  value="3"/><span>黄色</span>

    <input type="checkbox"  value="4"/><span>蓝色</span>

    <input type="checkbox"  value="5"/><span>紫色</span>

  </div>

  <div>

    <button type="button" onclick="getValue()">获取选中的复选框的值</button>

  </div>

  <div>

   <p id="show">

  </div>

  <script>

    function getValue()

    {

      //获取所有的input标签

      var input = document.getElementsByTagName("input");

      var str="选中的值为:";

      for (var i = 0; i < input.length; i++)

      {

        var obj = input[i];

        //判断是否是checkbox并且已经选中

        if (obj.type == "checkbox" && obj.checked) 

        {

          var code = obj.value;//获取checkbox的值

          str=str+code+",";

        }

      }

     document.getElementById("show").innerText=str;

    }

  </script>

</body>

</html>

2、然后保存,将记事本文件的后缀txt,修改为html。如图:

js怎么获取所有选中的checkbox复选框

3、双击运行这个文件,看到如下界面:

js怎么获取所有选中的checkbox复选框

4、然后勾选上面的任意一个复选框,再点击按钮,将会获取到已经勾选的复选框的值,如下图所示:

js怎么获取所有选中的checkbox复选框

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢