javascript - 提交多个复选框值

Question

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)？

Answer 1

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

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

jsFiddle 演示

解释

• $('#myForm [type="checkbox"]:checked')选择属于 的后代#myForm、具有type值为 的属性checkbox并被检查的元素。

• 该.map()方法对结果元素进行迭代，并将函数中返回的值（将是value元素的 ，因为这里 `this 指的是实际的 DOM 元素）被添加到集合中。

• 最后，.get()用于将集合转换为简单的 Javascript 数组。

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

Answer 3

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

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

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