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

Question

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

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

Answer 1

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

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

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

$('.checkbox :checkbox');

此选择器将返回 type=checkbox 的所有元素以及 class=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>

Answer 2

您可以执行以下操作：

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

 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>

快乐编码！！！

Answer 3

或者，以更像 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()也可以实现相同的效果。

Answer 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>