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

Question

在这里，我使用6个单选按钮表示六个不同的值，我想从中选择一个按钮，并且select button的值显示在上div中在这里，我使用Java脚本来显示和隐藏单选按钮

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

这是我的JSfiddle。

Answer 1

像这样？

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

Answer 2

这是你所追求的吗？

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

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

的jsfiddle

更新：

将相同的值插入元素

<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
    });
});

请注意，如果您打算在发布请求中使用隐藏输入的值，则应使用name属性：

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

Answer 3

您需要做的是单选按钮上的另一个处理程序click() ，如果选中它们，则必须在上div中进行设置，如下所示

$('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
     } 
});

演示