Question

这里我使用6个单选按钮获得六个不同的值，我想从这些中选择一个按钮，并在上面的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
     } 
});

Demo

在选择单选按钮值显示在div和隐藏

3 个答案: