CODEWITHSUNDEEP
javascriptjqueryhtml
The mountain is calling..
The mountain is calling..

Reputation: 61

How to output the value of my radio button when click

I'm very noob in javascript. My question is how do I show the value of my radio button when click?

I have this code:

   <tr><td width="10px"></td><td width="60%">Neatness</td>
   <td width="40%">
   <input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
   <input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
   <input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
   <input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
   </td></tr>

Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.

Upvotes: 1

Views: 1622

Answers (5)

James Allardice
James Allardice

Reputation: 165941

With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):

$(".hover-star").click(function() {
   var selectedVal = $(this).val(); 
});

You could also use the change event, which fires whenever the selected radio button changes:

$(".hover-star").change(function() {
   var selectedVal = $(this).val(); 
});

You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.

Update based on comments

As you want to put the value into a div, you can simply do this inside the change event handler:

$("#yourDivId").text($(this).val());

Upvotes: 2

Rap
Rap

Reputation: 7282

Here you go ...

$('.hover-star').click(function (){$('#someDiv').text($(this).val());

Upvotes: 0

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

Jquery COde:

$(".hover-star").change(function() {
   var selectedVal = $(this).val();
   alert(selectedVal);
});

See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/

Upvotes: 0

James Hill
James Hill

Reputation: 61793

Use the jQuery class selector and attach to the click event:

$('.hover-star').click(function () {
    alert($(this).val());
}

Here's a working jsFiddle fiddle.

Alternatively, you could attach to the change event.

$('.hover-star').change(function () {
    alert($(this).val());
}

Take a look at the jQuery selectors documentation.

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

$('.hover-star').click(function () {
    alert($(this).val());
}

Upvotes: 1

Related Questions