체크 된 체크 박스의 모든 이름을 얻는 방법은 무엇입니까? 내 HTML 사이트의 끝에

Question

나는 모두의 이름이 체크 박스를 선택 표시 할. 예를 들어

, 나는 다음과 같은 체크 박스가있는 경우 :

<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 choosed 할 경우이 같이

, 그는 아무것도 choosed 할 없으면

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>