更改單選按鈕上的div文本單擊

Question

我想將單選按鈕值放在狀態div中。 狀態div的文本應根據用戶選擇的單選按鈕進行更改。 我在下面使用的代碼無法正常工作。 請幫忙。 謝謝！

HTML代碼：

 <form action="">
     <input type="radio" name="sex" value="male">Male<br>
     <input type="radio" name="sex" value="female">Female<br>
     <div id="status"></div>
  </form>​

JS代碼：

 $(document).ready(function () {
    RadioStatus="";

    $("input[type='radio']:checked").each( function()
    { 
        if ($(this).attr('checked');)
              RadioStatus=$(this).val();
              $("#status").text(RadioStatus);
        });

    $("input[type='radio']").change(function()  
     {
             RadioStatus= $('input[type='radio']:checked').val()
            $('#status').text(RadioStatus);        
    });
});

Answer 1

這應該工作：

$("input[type='radio']").click(function() {
    $('#status').text($(this).val());
});

Answer 2

對您的代碼進行一些細微調整，使其可以正常工作：

$(document).ready(function () {
    RadioStatus="";

    $("input[type='radio']:checked").each( function()
    { 
        if ($(this).attr('checked'))
              RadioStatus=$(this).val();
              $("#status").text(RadioStatus);
        });

    $("input[type='radio']").change(function()  
     {
             RadioStatus= $('input[type="radio"]:checked').val();
            $('#status').text(RadioStatus);        
    });
});​

請參閱： http ： //jsfiddle.net/f6Tru/

..或者你真的可以通過使用techfoobar的簡化一下：

$(document).ready(function () {
    $("input[type='radio']").click(function() {
        $('#status').text($(this).val());
    });
});​

代替。 參見： http : //jsfiddle.net/RrhYM/

Answer 3

您在單引號中有問題'

更改：

RadioStatus= $('input[type='radio']:checked').val()

至：

RadioStatus= $('input[type="radio"]:checked').val()

Answer 4

試試這個代碼

$('input[name ^=sex]').click(function() {
        $('#status').text($(this).val());
});

Answer 5

只需使用change來確定已選中單選按鈕。 然后使用html或text將所選單選按鈕的值附加到<div id="status"> 。

$(document).ready(function () {
    $('input[type=radio]').on("change", function() {
        $('#status').html($(this).val());
        // Alternative
        // $('#status').text($(this).val());
    });
});​

演示

Answer 6

演示

$("input:radio").click(function() { //use $("input:radio[name='sex']").click if more radio buttons there
  $('#status').text($(this).val());
});​

Answer 7

您可以使用以下JS代碼實現這一目標：

$("input").click(function(e){
     var selectedValue = e.currentTarget.value;                 
    $('#status').html(selectedValue );       
});