代码之家 › 专栏 › 技术社区 › Hello Universe

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

html javascript

Hello Universe · 技术社区 · 4 年前

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

<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也会返回所有文本。如何在以逗号分隔的字符串中而不是在数组中获取选中的多复选框值?

1 回复 | 直到 4 年前

DynasticSponge 4 年前

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

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

在这里,jquery选择器没有获取输入框。它获取输入框的父div。。。当你抓取内部文本时。。。它正在查找显示的结果文本。不考虑实际输入元素本身的检查值。

$('.checkbox :checkbox');

此选择器将返回所有类型为checkbox且父元素类型为checkbox的元素的数组。

type=checkbox的元素具有名为checked的属性,该属性为true或false。您可以检查其值以确定是否将其添加到字符串中。

下面的代码段使用基本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>

Arun AK 4 年前

您可以执行以下操作:

注: 默认情况下,我选中了两个复选框来展示解决方案。

const checked = $('.checkbox input[type="checkbox"]:checked')
const strings = []
const newVal = checked.map(data => strings.push(checked[data].value))

console.log(strings.join(','))

<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" checked 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" checked id="mediaTypes-4" value="I don't know">
    <label for="mediaTypes-4">
      I don't know
    </label>
  </div>

快乐编码!!!

Carsten Massmann 4 年前

或者,以更类似jQuery的方式,您可以这样做:

const checked = $('.checkbox input[type="checkbox"]:checked').map((_,c)=>c.value).toArray().join(",");

console.log(checked)

<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" checked 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" checked id="mediaTypes-4" value="I don't know">
    <label for="mediaTypes-4">
      I don't know
    </label>
  </div>

.toArray() 将jQuery对象转换为JavaScript数组。同样的道理也可以通过 .get() .

Mayank Kumar 4 年前

以下是纯JS的解决方案:

var mediaTypes = '';

function Result(){
  mediaTypes = [];
  var elmnts = document.getElementsByClassName('checkbox');
  for (let i = 0; i < elmnts.length; i++) {
    if(elmnts[i].checked) {
      mediaTypes.push(elmnts[i].value);
    }}
  mediaTypes = mediaTypes.join();
  console.log(mediaTypes);
  document.write(mediaTypes);
}

<!DOCTYPE html>
<html>
<body>

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