javascript - change div text on radion button click - Stack Overflow

admin管理员组

文章数量:1426901

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

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

• javascript
• jquery

Share Improve this question Follow asked Oct 23, 2012 at 10:44 pisipisi 12711 gold badge44 silver badges1616 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 6

This should work:

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

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/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/RrhYM/

You have a problem in your single quotes '

Change:

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

To:

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

Try this code

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

demo

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

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

You may achieve that with the following JS code :

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

​

​

本文标签： javascriptchange div text on radion button clickStack Overflow