啟用“選擇”單選按鈕值，以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
     } 
});

演示