如何使用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+'" />') 
    }); 
}); 

這demo在我加入例如從後格中的文本形式產生的隱藏輸入..

Answer 2

可以使用:checkbox選擇讓複選框和:checked過濾器，以獲得選中的複選框，然後使用.map()從這些複選框獲取所需的數據

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

Answer 3

試試這個

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

}) 
alert(checkboxvalue) 

Answer 4

我建議：

$('#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()。