选择复选框，并使用关闭按钮在div中显示所选复选框的值 [英] Select the checkbox and show the selected checkbox value in a div with close button

问题描述

我正在关注一个教程，有多个复选框，当我们选中该复选框并单击获取所选值"按钮时，将提示所选复选框的值. [这是本教程的网站] [1].现在，我想在有人选择复选框时执行此操作，然后该复选框的值将显示在带有关闭选项的div中.现在，我们单击获取所选值"按钮以获取所选复选框的值，但我希望它不带有获取所选值"按钮而自动显示..我的意思是当我们同时选中该复选框时，该值将显示在div中.我想将此应用到我自己的项目中.选中该复选框后，该值将在这样的div中显示.带有关闭选项的复选框的值[小提琴是在这里http://jsfiddle.net/eba6Lytk/

I am following a tutorial, there are multiple checkboxes , when we select the check box and click on the get selected value button then the value of the selected checkboxes alerted. [this is the tutorial site][1] .Now i want to do that when someone select the checkbox then the value of the checkbox show in a div with a close option. For now we click on the get selected value button to get the selected checkbox value but i want it automatic with out the get selected value button..i mean when we check the checkbox at the same time the value show in a div. I want to apply this for my own project. When the check box checked then the value show in a div like this.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

推荐答案

类似的东西.请注意，这还将:

Something like this. Note that this will also:

• 在单击一个框时取消选中所有其他框，以确保只有一个框 一次选中该框
• 如果未选中该框，则隐藏div
• 在div关闭时取消选中该框

• uncheck all other boxes when a box is clicked making sure only one box is checked at a time
• hide the div if the box is unchecked
• uncheck the box when the div is closed

$('.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>

这篇关于选择复选框，并使用关闭按钮在div中显示所选复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！