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 b开发者_运维问答etter yet does anyone know how to do this in jquery.

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.

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

Try this

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

Here you go ...

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

Jquery COde:

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

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