チェックされたチェックボックスのすべての名前を取得するには？

Question

私のhtmlサイトの終わりにチェックしたすべてのチェックボックスの名前を表示したい。例えば

、私は次のチェックボックスがある場合：

<input type="checkbox" name="Product1" value="149" id="checkbox_1" autocomplete="off"/> 
<input type="checkbox" name="Product2" value="249" id="checkbox_2" autocomplete="off"/> 
<input type="checkbox" name="Product3" value="349" id="checkbox_3" autocomplete="off"/> 

にチェックされているすべてのものの名前は、ボタンを押さずに同じページ上の任意の位置に表示される必要があります。このよう

は、彼が2と3を選びました場合：彼は何を選びましない場合

You choosed following products: 
Product2 
Product3 

、何も表示されないはずです。

誰でも私にこれを手伝ってもらえますか？残念ながら、私はhtmlを知っていますが、JS/JQueryはありません。

ありがとうございます！

Answer 1

var names = $(':checkbox:checked').map(function(){ return this.name; }); 
if (names.length) { 
    console.log(names.get().join(',')); 
} 

彼らは共有クラスはしかし、その後、あなたはスニペットの下にチェックすることができ

$('.theclass').filter(':checked').map(function(){ return this.name; }); 

//demo example 
 
$(function(){ 
 
    //get all the products 
 
    var $allProducts = $('.product'); 
 
    //get the area to write the results to 
 
    var $selectedProductsListing = $('#selectedProducts'); 
 
    //get the label 
 
    var $selectedProductsLabel = $('#selectedProductsLabel'); 
 
    
 
    //when you click a checkbox, do the logic 
 
    $allProducts.on('click', function(){ 
 
    //set the content of the results 
 
    $selectedProductsListing.html(
 
     //only return those that are checked 
 
     $allProducts.filter(':checked').map(function(index, checkbox){ 
 
     //return a div string with the name for display 
 
     return '<div>'+ checkbox.name +'</div>'; 
 
     }).get().join('') //get the array of strings and join them by nothing 
 
    ); 
 
    
 
    //hide the label if no checkboxes are selected 
 
    if ($selectedProductsListing.text().trim().length) { 
 
     $selectedProductsLabel.show(); 
 
    } else { 
 
     $selectedProductsLabel.hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="Product1" value="149" class="product" id="checkbox_1" autocomplete="off"/> 
 
<input type="checkbox" name="Product2" value="249" class="product" id="checkbox_2" autocomplete="off"/> 
 
<input type="checkbox" name="Product3" value="349" class="product" id="checkbox_3" autocomplete="off"/> 
 

 
<div id="selectedProductsLabel" style="display:none">Products Selected:</div> 
 
<span id="selectedProducts"></span>

Answer 2

をセレクタ良く作ることができなかった場合、それが良いだろう。

$("input").click(function(){ 
 
    var seList = $("input:checked").map(function(v){ 
 
    return (this.name); 
 
    }) 
 
    $("#info").html(seList.join("<br>")) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<input type="checkbox" name="Product1" value="149" id="checkbox_1" autocomplete="off"/> 
 
<input type="checkbox" name="Product2" value="249" id="checkbox_2" autocomplete="off"/> 
 
<input type="checkbox" name="Product3" value="349" id="checkbox_3" autocomplete="off"/> 
 
<div id="info"> 
 
</div>