选中复选框并在关闭按钮中显示选中的复选框值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>