更改单选按钮上的div文本单击

Question

I want to put the radio button value in the status div. The text of status div should change, according to the radio button selected by the user. The code that I used bellow is not working. Please help. Thanks!

HTML code:

 <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 code:

 $(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

This should work:

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

Answer 2

A few minor adjustments to your code got it to work just fine:

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

see: http://jsfiddle.net/f6Tru/

..or you can really simplify it by using techfoobar's:

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

instead. see: http://jsfiddle.net/RrhYM/

Answer 3

You have a problem in your single quotes '

Change:

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

To:

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

Answer 4

Try this code

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

Answer 5

Simply use change to determine that a radio button is selected. Then use html or text to append the value of chosen radio button to your <div id="status"> .

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

DEMO

Answer 6

demo

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

Answer 7

You may achieve that with the following JS code :

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

​

​