提交多个复选框值答案

【问题标题】：Submit multiple checkboxes values提交多个复选框值
【发布时间】：2012-11-11 21:56:18
【问题描述】：

jquery:

(...)
$('#button_submit').click(function() 
{                           
func(check_box_values) 
});

html:

<form id="myForm">
<label class="checkbox">
<input type="checkbox" name="my_opt[]" value="1">opt1</label>
<label class="checkbox">
<input type="checkbox" name="my_opt[]" value="2">opt2</label>
<label class="checkbox">
<input type="checkbox" name="my_opt[]" value="3">opt3</label>
<input id='my_opt' type='hidden' name='my_opt[]' />
<input type="button" id="button_submit" value="go">
</form>

我怎样才能将选中的复选框值传递到那里以在func(check_box_values) 中使用？

【问题讨论】：

标签： javascript jquery html forms checkbox

【解决方案1】：

您可以为此使用.map() 方法：

var check_box_values = $('#myForm [type="checkbox"]:checked').map(function () {
    return this.value;
}).get();

jsFiddle Demo

说明

$('#myForm [type="checkbox"]:checked') 选择作为#myForm 后代的元素，具有type 属性的值为checkbox，并被检查。
.map() 方法对结果元素进行迭代，并将函数中返回的值（将是元素的value，因为这里的 `this 指的是实际的 DOM 元素）添加到收藏。
最后，.get() 用于将集合转换为简单的 Javascript 数组。

【讨论】：

我忘了说我应该能够进一步使用复选框值。例如。 if (check_box_values === 1) // something你的解决方案可以吗？
@skdnewbie 这些值将被收集到一个数组中（名为check_box_values）。您可以对数组执行任何操作，例如使用 jQuery 的 inArray() 方法来检查其中是否存在某个值。如果前两个复选框被选中，则数组将为[1,2]，其中包含选中复选框的值。
你肯定已经意识到我是初学者，所以我会问你，对不起，我怎样才能得到数组值。谢谢，这就是我想要的
@skdnewbie 例如，要检查2 是否在数组中，您可以使用$.inArray() 编写if ($.inArray('2', check_box_values) > -1) { //it's fine }。例如，您可以阅读有关 arrays on MDN 的信息，如果没有它，您将无法成功。
如果我只想传递未经检查的值有多难？

【解决方案2】：

如果你想要所有的复选框元素（不仅仅是选中的元素），试试这个。这不使用 jQuery。

var formEl = document.getElementById('myForm'),
    inputs = formEl.getElementsByTagName('input'),
    numInputs = inputs.length,
    checkboxEls = [];

while(numInputs--) {
    if (inputs[numInputs].getAttribute('type') == 'checkbox') checkboxEls.push(inputs[numInputs]);
}

func(checkboxEls);

【讨论】：

【解决方案3】：

如果您想获取复选框的值，可以使用此代码。

$("#button_submit").on("click",function(){
    $("#myForm input").each(function(){
         var Check = $('#chkSelect');
         if(Check.is(':checked') == true){
             func(Check.attr('value'));
         }
    });
});

此代码将在整个表单上创建一个循环，并检查复选框是否选中，然后在您的代码中调用 func 函数。

【讨论】：