jQueryを使用してスパンにチェックボックスの値を設定する

Question

以下のhtmlがあるとします。最も効果的な方法は何でしょうか？

<span class="text"></span> 
<div class="allboxes"> 
    <input type="checkbox" value="a"> 
    <input type="checkbox" value="b"> 
    <input type="checkbox" value="c"> 
    <input type="checkbox" value="d"> 
</div> 

// on click of a checkbox, span should be populated by the checked boxes 
// <span class="text">a b d</span> 

Answer 1

<span class="text"></span> 
<div class="allboxes"> 
    <input type="checkbox" value="a"> 
    <input type="checkbox" value="b"> 
    <input type="checkbox" value="c"> 
    <input type="checkbox" value="d"> 
</div> 

jqueryの一部

var n = jQuery("div.allboxes :checkbox").map(function(){ 
     return jQuery(this).val();}).get().join(" "); 
alert(n); 

作業例here

Answer 2

jQuery('input:checked') 

小さなそれを維持し、HTMLを修正することが重要であるので、チェックボックスのリストは、数百に成長することができます。属性値の間にカンマを使用することはできません。

Answer 3

HTMLのクリーンアップ：

<span class="text"></span> 
<div class="allboxes"> 
    <input type="checkbox" value="a"> 
    <input type="checkbox" value="b"> 
    <input type="checkbox" value="c"> 
    <input type="checkbox" value="d"> 
</div> 

そして、あなたはこのような何か行うことができますで

$('.allboxes input').change(function() { 
    var whichSelected = []; 
    $.each($('.allboxes input:checked'), function(a,b) { 
     whichSelected.push($(b).val()); 
    }); 
    $('.text').text(whichSelected.join(' ')); 
}); 

フィドルを：http://jsfiddle.net/amirshim/sDDps/3/

Answer 4

すべてのチェックボックスの解析を避けることをお勧めします。グローバル配列を使用して、spanに値を設定する値を格納します。

var globalvar = new Array(); 
function populate(obj){ 
globalvar .push(obj.value)); 
$('.text').text(globalvar.join(' ')); 
} 

以下のようにHTMLを作成します。または、これらの関数を一度だけ挿入する関数を実行します。

<span class="text"></span> 
<div class="allboxes"> 
    <input type="checkbox" value="a" onclick="populate(this)"> 
    <input type="checkbox" value="b" onclick="populate(this)"> 
    <input type="checkbox" value="c" onclick="populate(this)"> 
    <input type="checkbox" value="d" onclick="populate(this)"> 
</div>