チェックされたすべての入力のラベルを取得し、htmlに追加します（それぞれ）

Question

ページにラベルを含む複数のチェックボックスがあります。チェックされているチェックボックスごとに、ラベルをdivに追加したい（コンマ区切り）。チェックボックスの1つがチェックされていない場合、その特定のラベルをdivから削除します。チェックボックスの数は可変にすることができます。

私がこれまで持っているもの：このコードで

$("input:checkbox").click(function() { 
 
     var selected = $("label[for='" + this.id + "']").text() + ','; 
 
     $("p").html(selected); \t 
 
    }); \t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p></p> 
 

 
<input id="checkbox1" type="checkbox" /> 
 
<label for="checkbox1">checkbox label</label>

私はHTMLに確認し、チェックボックスのラベルの1つを追加することができます。

Answer 1

.filter():checkedチェックボックスを使用して、.map()を使用し、配列内にラベルテキストを取得します。

//Cache selectors 
 
var elem = $("input:checkbox"); 
 

 
//Bind change event 
 
elem.change(function() { 
 
    var selected = elem 
 
    .filter(':checked') //Filter only checked checkboxes 
 
    .map(function() { 
 
    return $("label[for='" + this.id + "']").text(); 
 
    }) 
 
    .get(); //Get array 
 
    
 
    $("p").html(selected.join(',')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p></p> 
 

 
<input id="checkbox1" type="checkbox" /> 
 
<label for="checkbox1">checkbox label</label> 
 
<br/> 
 
<input id="checkbox2" type="checkbox" /> 
 
<label for="checkbox2">checkbox label 2</label>

Answer 2

私の提案は、に基づいています。チェックボックスが値を変更するときにイベントがchangeではなく、チェックボックス変化状態段落の内容がなければならないとき

をクリックで

• をチェックボックスを選択するために使用することができます：:checkbox Selector
• のみがチェックの要素をフィルタリングするために、あなたは:checked Selector
• empty the paragrapgh
• for each確認要素appendラベルテキストを使用することができます。

マイスニペット：

$(":checkbox").on('change', function(e) { 
 
    $("p").empty(); 
 
    $(":checkbox:checked").each(function(i, e) { 
 
    var selectedLblText = $("label[for='" + this.id + "']").text(); 
 
    $("p").html(function(index, oldhtml) { 
 
     return (oldhtml == '') ? selectedLblText : oldhtml + ', ' + selectedLblText; 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p></p> 
 
<form> 
 
    <input id="checkbox1" type="checkbox"/> 
 
    <label for="checkbox1">checkbox label</label><br> 
 
    <input id="checkbox2" type="checkbox"/> 
 
    <label for="checkbox2">checkbox labe2</label><br> 
 
    <input id="checkbox3" type="checkbox"/> 
 
    <label for="checkbox3">checkbox labe3</label> 
 
</form>