jQuery，选中复选框答案

【问题标题】：jQuery, checkbox checkedjQuery，选中复选框
【发布时间】：2015-05-19 20:39:06
【问题描述】：

我有以下代码：

<form>
<input type="checkbox" name="type" value="Club" onclick="getselectedcheckbox()"checked/>Club<br/>
<input type="checkbox" name="type" value="Pub" onclick="getselectedcheckbox()" checked/>Pub<br/>
<input type="checkbox" name="type" value="Home" onclick="getselectedcheckbox()"/>Home<br/>
<input type="checkbox" name="type" value="Concert" onclick="getselectedcheckbox"/>Concert<br/>

<script>
function displayVals() {
var checkedValues = $('input:checkbox:checked').map(function() {
    alert(this.value);
});
   }

$( "select" ).change( displayVals );
displayVals();
</script>

我正在尝试选中所有复选框，然后使用 ajax 发送它。但是现在，每个复选框都有 1 个不同的警报，有没有办法在一个字符串中获取所有选中的值？

我听说过 .join()，但我真的不知道将它放在我的代码中的什么位置。还是从 Javascript / jquery 开始：/

有什么想法吗？

谢谢，独行侠

【问题讨论】：

听起来你在追api.jquery.com/serialize
是的，序列化你的 FORM：$('form').serialize()
jQuery get values of checked checkboxes into array的可能重复

标签： jquery ajax checkbox

【解决方案1】：

声明一个数组并将所有值压入其中，例如：

   var selected = [];
   function displayVals() {
      var checkedValues = $('input:checkbox:checked').each(function() {
         selected.push(this.value);
      });
   }

 var stringArray =  selected.join();

使用array join将数组转换为字符串

【讨论】：

这不是回答如何获取字符串的问题

【解决方案2】：

有没有办法在一个字符串中获取所有检查的值？

在您的地图中，返回复选框值，然后使用 get() 从 jQuery 对象中检索值的 JavaScript 数组。最后，使用join() 转换为逗号分隔的字符串。

var checkedValues = $('input:checkbox:checked').map(function() {
    return this.value;
}).get().join(',');

结果将是（全部选中）：

Club,Pub,Home,Concert

【讨论】：

这个回答问题如被问及但由于 OP 想使用 ajax 发送它，这似乎更好地序列化 FORM imho
谢谢，这很好用。稍后我会研究序列化，当我想优化代码时:)

【解决方案3】：

提供一个像myform 这样的表单ID，然后简单地使用：

$('#myform').serialize();

注意：它不会给未选中的复选框值

如果您还想获得未选中的值，那么您需要在序列化之前显式设置未选中复选框的值 false。

$('#myform').find(':checkbox:not(:checked)').attr('value', false);

【讨论】：

【解决方案4】：

试试这个

function displayVals() {
    var names = $('input[type="checkbox"]:checked').map(function() {
      return this.value;
    }).get();

     return names;
}

【讨论】：

【解决方案5】：

尝试选择每个名为 = "type" 的输入。您必须像这样修改 displayVals 中的inputtag

function displayVals() {
var checkedValues = $('input[name=type]:checked').map(function() {
alert(this.value);
});

【讨论】：