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

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+'" />')
    });
});

这个演示以我添加的表单作为示例生成隐藏输入，其中包含来自 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 小提琴演示。

参考：

• appendTo().
• 属性等于 ( [attribute="value"]) 选择器。
• 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)