Question

Hi i have a radio button(StarRating radiobutton using jquery) and a textbox. When i click on the star, i would like the radiobutton value to display to the textbox.

<input id="InsRating1" class="star" type="radio" name="InsRating" value="1" title="Worst"/>
<input id="InsRating2" class="star" type="radio" name="InsRating" value="2" title="Good"/>

I tried put the Onclick() in the but onClick() has never get fired.
Please advice how to get the value from my radiobutton to textbox. Thanks

I tried this below, but the value is “Undefined”

$(document).ready(function() {

    $('#InsRating1').click(function() {
        alert(this.value)

    });

});

————-Edit———-
I am using g_thom’s answer below but come to this problem :
I have 3 set of stars with 3 textboxes. Each rating should show to only 1 textbox.
However whenever any star is clicked, it shows the value to all 3 textboxes instead of just specified one. Please advice. Thanks

<script type="text/javascript">

$(function() {
$(‘.star-rating’).click(function() {
// assign the value of “total stars” to a textbox with an id of ratingText
$(‘#EvaluationInstructorRatingTextBox’).val($(‘.star-rating-on’).length);
});
$(‘.rating-cancel’).click(function() {
// the value is ‘0’ when the cancel button is clicked
$(‘#EvaluationInstructorRatingTextBox’).val(‘0’);
});

$('.star-rating').click(function() {
    // assign the value of "total stars" to a textbox with an id of ratingText
    $('#EvaluationMaterialRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
    // the value is '0' when the cancel button is clicked
    $('#EvaluationMaterialRatingTextBox').val('0');
});


$('.star-rating').click(function() {
    // assign the value of "total stars" to a textbox with an id of ratingText
    $('#EvaluationValueRatingTextBox').val($('.star-rating-on').length);
});
$('.rating-cancel').click(function() {
    // the value is '0' when the cancel button is clicked
    $('#EvaluationValueRatingTextBox').val('0');
});

});

Answer 1

Since the inputs are converted to divs (with the ‘rated stars’ being assigned a different class), I think you’ll want to count the number of divs with the .star-rating-on class and assign that value to the input, like this:

$('.star-rating').click(function() {
    // assign the value of "total stars" to a textbox with an id of ratingText
    $('#ratingText').val($('.star-rating-on').length);
});

Boring looking example – without the actual graphics/animations (just the HTML from the transformed inputs on plugin page – the value will always be 4): http://jsfiddle.net/bhf2d/

EDIT

The code above should work. I think you may be thinking that you need to apply your jQuery to the radio button, but that’s not the case, since it is swapped out on page load with a div. Just in case you’re not clear, I’ve added a live example using the code you provided in your question: Click here to see it.

EDIT 2

See an updated version here, matching the additional requirement to set multiple checkboxes. The textboxes have been renamed slightly (InsRatingText0 etc) to facilitate easily adding more items. The name convention InsRatingText[n] is set that way to match the div classes the plugin adds dynamically (‘rater-0’, ‘rater-1’, etc)