CODEWITHSUNDEEP
jquery
AKor
AKor

Reputation: 8882

jQuery and Radio Buttons

I have a table full of radio buttons. Each one has a name and id that corresponds to a number 1 - 24. I want to use jQuery to dynamically display that number elsewhere in the page.

For example, if I were to click the 7th radio button, I want to have the number 7 appear at the top of the page.

Upvotes: 0

Views: 392

Answers (4)

Šime Vidas
Šime Vidas

Reputation: 185933

$('input:radio').click(function() {
    $('#top').text( this.id );
});

Note: ID's should not start with a digit... consider prefixing a letter or word or something.

Upvotes: 1

Onema
Onema

Reputation: 7582

The following code should be fully functional, just make sure you include the jquery library from your local copy rather than from google. And add the "showNumber" div where you what the numbers to show up.



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>





<script type="text/javascript">
$(document).ready(function() {
    $("input:radio[name=numberOptions]").click(function() {
        var theNumberSelected = $(this).val();
        // Remove whatever old valueswe have in the container
        $('#showNumber').empty();
        $('#showNumber').append("<h1>" + theNumberSelected + "</h1>");
        
    });
});
</script>
<div id="showNumber"></div>
<p><input type="radio" name="numberOptions" value="1" id="one" class="numbers"> <label for="one">ONE</label></p>
<p><input type="radio" name="numberOptions" value="2" id="two" class="numbers" > <label for="two">TWO</label></p>

Good luck!

Upvotes: 0

kajo
kajo

Reputation: 5761

you can use my example at http://jsfiddle.net/jKNr9/

html:

<input type="radio" name="group1" id="1" />
<input type="radio" name="group1" id="2" />
<input type="radio" name="group1" id="3" />

<br />
<span id="result"></span>

js:

$(document).ready(function() {
    $("input[name=group1]").change(function() {
        $('#result').html($(this).attr('id'));
   });
});

Upvotes: 1

generalhenry
generalhenry

Reputation: 17319

sounds like you want something like:

$(':radio').click(function(){
  var index = $(this).index(':radio') + 1;
  $('#elementAtTopOfPage').html(index);
});

or

$(':radio').click(function(){
  var id = $(this).attr('id');
  $('#elementAtTopOfPage').html(id);
});

Upvotes: 2

Related Questions