如何返回选中复选框的所有值？ [复制]答案

【问题标题】：How to return all values of checked checkboxes? [duplicate]如何返回选中复选框的所有值？ [复制]
【发布时间】：2018-08-07 04:27:41
【问题描述】：

function submit() {
    var values = [];
    $("input[type=checkbox]:checked").each(function(){
        values.push($(this).next("value").text());
    });
    alert(values.join());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name = "top" class="checkbox" id="check1" value = "black top"/>
<input type="checkbox" name = "top" class="checkbox" id="check2" value="squish" value = "blue something" />    
<button type="button" onclick="submit()">Click Me!</button>

上面是我的几个简单 HTML 复选框的代码。我创建了一个简单的按钮来配合它，当我点击它时，我希望它返回选中复选框的值。

但是，当我单击按钮时，我只会看到一个空的警报框。

这些值不能正确地附加到数组中。但我不知道为什么，HTML/JS/JQuery 的新手。

如何使用 JS 或 JQuery 来统计所有的复选框。

【问题讨论】：

首先，如果您想要当前复选框的值，我不确定为什么要调用 next()。此外，该值可以从val() 获取，而不是text()。请参阅我标记的副本，以使用map() 更简洁地执行此操作

标签： javascript jquery html

【解决方案1】：

你需要使用$(this).val()来获取这样的值

function submit() {
  var values = [];
  $("input[type=checkbox]:checked").each(function() {
    values.push($(this).val());
  });
  alert(values.join());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="top" class="checkbox" id="check1" value="black top" />
<input type="checkbox" name="top" class="checkbox" id="check2" value="squish" value="blue something" />
<button type="button" onclick="submit()">Click Me!</button>

【讨论】：

很有魅力！谢谢
@JoeBoggs 很高兴我能帮上忙 :)

【解决方案2】：

使用checkbox，我们可以使用this.checked 从它们的状态中获取一个布尔值。

只需使用$(this).val() 即可将<input> 值放入您的数组中。

希望这就是您想要的。如果需要，很乐意解释或帮助提供更好的解决方案。

function submit() {
    var values = [];
    $(".checkbox").each(function(){
      if (this.checked)
        values.push($(this).val());
    });
    alert(values.join());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name = "top" class="checkbox" id="check1" value="black top"/>
<input type="checkbox" name = "top" class="checkbox" id="check2" value="squish" value = "blue something" />    

<button type="button" onclick="submit()">Click Me!</button>

【讨论】：