启用“选择”单选按钮值，以div显示并隐藏

Question

Here I use 6 radio button for six different value, I want to select one button from in these and the value of select button show in upper div Here I use a java script for show and hide radio button

<script> $(document).ready(function(){  
   $("#cityshow").click(function(){    
      $("#citybox").toggle();  
   });
});
</script>

Here is My JSfiddle.

Answer 1

Like this?

$(document).ready(function(){
    $("#cityshow").click(function(){
        $("#citybox").toggle();
    });
    $("#citybox input:radio").click(function() {
        $("#citybox").toggle();
        $("#cityshow").text($(this).val());
    });
});

Answer 2

Is this what you're after?

$(document).ready(function(){
    $("#cityshow").click(function(){
      $("#citybox").toggle();
    });

    $('#citybox input[type="radio"]').click(function(){
        var buttonValue = $(this).val();
        $("#citybox").toggle();
        $('#cityshow').text(buttonValue);
    });
});

JSFiddle

UPDATE:

To insert the same value into the element

<input id="cityid" type="hidden" name="" value="" >

$(document).ready(function(){
    $("#cityshow").click(function(){
      $("#citybox").toggle();
    });

    $('#citybox input[type="radio"]').click(function(){
        var buttonValue = $(this).val();
        $("#citybox").toggle();
        $('#cityshow').text(buttonValue);
        $('#cityid').val(buttonValue); // inserts value into input
    });
});

Please note, if you intend to use the value of the hidden input in a post request, then you should use the name attribute:

<input id="cityid" type="hidden" name="cityid" value="" >

Answer 3

All you need is another handler click() on radio buttons and if they are checked you have to set it in the upper div like following

$('input[type="radio"]').on('click',function(){
     if(this.checked){
        // $(this).closest(".citycollection").siblings(".citybox").text(this.value); // Set value to citybox
         $("#cityshow").text(this.value);
         $("#citybox").hide(); // hide city box
     } 
});

Demo