CODEWITHSUNDEEP
jquery
Eirik
Eirik

Reputation: 3

Select a radiobutton

I'm trying to get that when you click on a row in the table then the radio button on the same row will be selected.

Have anyone some suggestions for how this can be done?

<form name="form1" method="post" action="">
<table id="simplehighlight" class="REW_table" style="width: 350px; margin-left: auto; margin-right: auto;" >
    <thead></thead>
    <tr><td><input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"></tr>
    <tr><td><input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"></tr>
    <tr><td><input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"></tr>
    <tr><td><input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"></tr>
    <tr><td><input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0"></tr>
</table>
</form>

Javascript:

$(document).ready(function(){
    $('#simplehighlight tr').hover(function(){
        $(this).children().addClass('datahighlight'); // Mark lightgray

        $(this).click(function(){
            $('#simplehighlight tr').children().removeClass('datahighlight_select'); // Remove all old blue mark
            $(this).children().addClass('datahighlight_select'); // Mark blue
        });

    },function(){
        $(this).children().removeClass('datahighlight'); // Remove lightgray
    });
});

Upvotes: 0

Views: 172

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

Try:

$("#simplehighlight tr").click(function () {
    $(this).find("input:radio").prop("checked", true);
});

Using .prop() with .find() and binds to the click event using .click()

Also note that your HTML as posted is invalid:

  • Your input tags should be self-closing and,
  • You've forgotten the </td> tag.
  • Additionally, you have multiple elements on one page with the same id attribute, which is not allowed.

Here's an example: http://jsfiddle.net/yJ3RN/ (also corrects the HTML problems)

Upvotes: 3

Related Questions