javascript - 使用 jQuery 获取选中复选框的值

Question

我想遍历复选框组“locationthemes”并构建一个包含所有选定值的字符串。 因此，当复选框 2 和 4 被选中时，结果将是:“3,8”

<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<input type="checkbox" name="locationthemes" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="locationthemes" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>

我在这里查看:http://api.jquery.com/checked-selector/但没有示例如何按名称选择复选框组。

我该怎么做？

Answer 1

在 jQuery 中只需使用属性选择器，如

$('input[name="locationthemes"]:checked');

选择名称为“locationthemes”的所有选中输入

console.log($('input[name="locationthemes"]:checked').serialize());

//or

$('input[name="locationthemes"]:checked').each(function() {
   console.log(this.value);
});

Demo

---

在 VanillaJS

[].forEach.call(document.querySelectorAll('input[name="locationthemes"]:checked'), function(cb) {
   console.log(cb.value); 
});

Demo

---

在 ES6/展开运算符中

[...document.querySelectorAll('input[name="locationthemes"]:checked')]
   .forEach((cb) => console.log(cb.value));

Demo