时间戳

首页 > 解决方案 > 如何在字符串中获取选定的多复选框值

javascript - 如何在字符串中获取选定的多复选框值

问题描述

如何在逗号分隔的字符串中获取选中的多复选框值，而不是在数组中？我有一个多重复选框，如下所示

<div class="col-md-7 form-inline mediaTypesContain">
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes" value="Video">
                        <label for="mediaTypes">
                            Video
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-1" value="Audio">
                        <label for="mediaTypes-1">
                            Audio
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-2" value="Images">
                        <label for="mediaTypes-2">
                            Images
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-3" value="PDF Files">
                        <label for="mediaTypes-3">
                            PDF Files
                        </label>
                    </div>
                    <div class="checkbox">
                        <input type="checkbox" id="mediaTypes-4" value="I don't know">
                        <label for="mediaTypes-4">
                            I don't know
                        </label>
                    </div>

我正在尝试使用以下 JS 仅获取检查的值。

        var mediaTypes = $('.checkbox')[0].innerText + ',' + $('.checkbox')[1].innerText + ','+ $('.checkbox')[2].innerText + ','+ $('.checkbox')[3].innerText + ','+ $('.checkbox')[4].innerText

但是，即使未选择该字段，JS 也会返回所有文本。如何在逗号分隔的字符串中获取选中的多复选框值，而不是在数组中？

标签： javascripthtml

解决方案

不是最短或最简洁的脚本......但为了更好地解释为什么你不在你想去的地方......

var mediaTypes = $('.checkbox')[0].innerText

在这里，您的 jquery 选择器没有得到输入框。它获取输入框的父 div... 当您抓取 innerText... 它正在寻找显示的结果文本。没有考虑实际输入元素本身的检查值。

$('.checkbox :checkbox');

此选择器将返回 type=checkbox 的所有元素以及 class=checkbox 的父元素的数组。

type=checkbox 的元素有一个名为checked 的属性，该属性为真或假。您可以检查其值以确定是否将其添加到您的字符串中。

以下代码片段使用基本的 for 循环来获取所有复选框元素，确定选中的元素，然后将它们放入字符串中，然后将其输出到控制台。其他答案使用更高级的 jquery 选择器和数组/匿名函数来做基本相同的事情。

function onTestClick() {
  var checkedString = '';
  for (var i = 0; i < 5; i++) {
    var element = $('.checkbox :checkbox')[i];
    if (element.checked) {
      if (checkedString.length > 0) {
        checkedString += ',';
      }
      checkedString += element.value;
    }
  }
  console.log('checkedString = ' + checkedString);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-7 form-inline mediaTypesContain">
  <div class="checkbox">
    <input type="checkbox" id="mediaTypes" value="Video">
    <label for="mediaTypes">Video</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="mediaTypes-1" value="Audio">
    <label for="mediaTypes-1">Audio</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="mediaTypes-2" value="Images">
    <label for="mediaTypes-2">Images</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="mediaTypes-3" value="PDF Files">
    <label for="mediaTypes-3">PDF Files</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="mediaTypes-4" value="I don't know">
    <label for="mediaTypes-4">I don't know</label>
  </div>
  <button id="testButton" onClick="onTestClick()">Test</button>
</div>

推荐阅读