Question

我在页面上有一些带有标题的复选框，我想要检查所有复选框并使用jQuery对应该复选框的信息？

最终，我想提交一份包含用户所选内容的表单。但由于表单不知道，我需要在用户点击打开表单的按钮时获取信息。

谢谢！

<section id="myoptions">

<label for="123">
<div class="thisineed">Want this text</div>
<div><input type="checkbox" id="123"></div>
<div class="thisaswell">This one I want as well</div>
</label>

<label for="124">
<div class="thisineed">Want this text</div>
<div><input type="checkbox" id="124"></div>
<div class="thisaswell">This one I want as well</div>
</label>

</section>

Answer 1

您可以使用它来访问选中的复选框：

$('input[type=checkbox]:checked').each(function(){
    console.log(this); 
});

这是一个例子给你。有点不清楚你在寻找什么，但检查一下：

$('#get_form').click(function () {
    $('input[type=checkbox]:checked').each(function () {
        console.log(my_form);
        var somevalue = $(this).parent().next('.thisaswell').text();
        console.log(somevalue);
        $('#my_form').append('<input type="hidden" value="'+somevalue+'" />')
    });
});

这个 demo 会在我添加的表单中生成隐藏的输入，例如来自div的文本。

Answer 2

我建议：

$('#getOptions').click(function (e) {
    e.preventDefault();
    var opts = $('input[type="checkbox"]').filter(function () {
        return this.checked;
    }).map(function () {
        var p = $(this).closest('div');
        return [p.prev().text(), p.next().text()];
    }).get(),
        hidden = $('<input />', {
            'type': 'hidden'
        });
    $.each(opts, function (i, v) {
        hidden.clone().val(v).appendTo('form');
    });
});

JS Fiddle demo

参考文献：

appendTo()。
Attribute-equals ([attribute="value"]) selector。
click()。
clone()。
event.preventDefault()。
get()。
jQuery.each()。
map()。
next()。
prev()。
text()。
val()。

Answer 3

您可以使用:checkbox选择器获取复选框，使用:checked过滤器获取选中的复选框，然后使用.map()从这些复选框中获取所需数据

var array = $('#myoptions input').filter(':checkbox:checked').map(function(){
    return { id: this.id, value: this.value}
}).get()

Answer 4

试试这个

var checkboxvalue='';
$('#myoptions input[type="checkbox"]').each(function(){
    var this_input=$(this);
    if(this_input.is(':checked')){
    checkboxvalue += this_input.attr('value')    ;
   }

})
alert(checkboxvalue)

如何使用Jquery获取复选框和相应信息？

4 个答案: