選中複選框並在關閉按鈕中顯示選中的複選框值div

Question

我正在學習一個教程，有多個複選框，當我們選中複選框並單擊獲取選定值按鈕時，所選複選框的值警報。 [這是教程網站] [1]。現在我想這樣做，當有人選擇複選框，然後複選框的值顯示在一個關閉選項的股利。現在我們點擊獲取選定值按鈕來獲得選中的複選框值，但我希望它自動獲得選定值按鈕..我的意思是當我們選中複選框的同時值顯示在一個div中。我想將其應用於我自己的項目。選中該複選框後，該值將顯示在像這樣的div中。 The value of the checkbox with close option [the fiddle is here http://jsfiddle.net/eba6Lytk/

[1]: http://www.jquerywithexample.com/2012/11/get-selected-checkbox-using-jquery.html 

Answer 1

就像這樣。請注意，這也將：

• 取消選中所有其他框，當點擊一個盒子，確保只有一個 框在同一時間檢查
• 隱藏DIV如果沒有選中該複選框
• 取消選中該複選框時在div關閉

$('.chkNumber').click(function(){ 
 
    if($(this).is(':checked')){ 
 
     //uncheck all the other boxes 
 
     $('.chkNumber').prop('checked', false); 
 
     //re-check this one 
 
     $(this).prop('checked', true); 
 
     //show the div 
 
     $('#hiddenDiv').show(); 
 
     //update the displayed value to that of the checked box 
 
     $('#numberDisplay').html($(this).val()); 
 
    } 
 
    else{ 
 
     //clicked box was unchecked, hide the div and clear the displayed number 
 
     $('#hiddenDiv').hide(); 
 
     $('#numberDisplay').html(''); 
 
    } 
 
}); 
 

 
$('#closeBtn').click(function(){ 
 
     //div was closed, uncheck all boxes, hide the div, and clear the displayed number 
 
     $('.chkNumber').prop('checked', false); 
 
     $('#hiddenDiv').hide(); 
 
     $('#numberDisplay').html(''); 
 
});

#hiddenDiv{ 
 
    display:none; 
 
    border:thin inset #9B8E8E; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <div> 
 
    <input type="checkbox" class="chkNumber" value="1" />One<br /> 
 
    <input type="checkbox" class="chkNumber" value="2" />Two<br /> 
 
    <input type="checkbox" class="chkNumber" value="3" />Three<br /> 
 
    <input type="checkbox" class="chkNumber" value="4" />Four<br /> 
 
    <input type="checkbox" class="chkNumber" value="5" />Five<br /><br /> 
 
    </div> 
 

 
<div id="hiddenDiv"> 
 
    <div id="numberDisplay"></div> 
 
    <br> 
 
    <br> 
 
    <input type="button" id="closeBtn" value="Close Div"/> 
 
</div>