onClick of table cell selects radio button inside

Question

I have 14 rows of 5 td cells. In each one is a radio button. I want the user to be able to click anywhere in the table cell in order to select its radio button. Each row is created thus:

                @for (int i01 = 1; i01 <= 5; i01++) {
                <td id="tablecellradiobutton" onMouseover="this.bgColor='88,150,183'" onMouseout="this.bgColor='white'" onclick="@('Q01' + i01).checked = true">
                    @Html.RadioButton("Q01", i01, Q01 == i01.ToString(), new { id = "Q01" + i01 })  
                </td>
                }

However, my onClick is falling over, giving me the error:

Compiler Error Message: CS1012: Too many characters in character literal

This really ought to be damn simple to do without a JavaScript (or jQuery) function, but I think I'm becoming resigned to needing one. But could someone help me to correct my code?

Answer 1

I can't correct your existing code, but you are going to have multiple instances of thesame id:

 <td id="tablecellradiobutton"...

you need to create individual ids for each td - probably appending the tr and td index number to the existing id would be the go.

I would use jQuery and using find() get the input within the td that was clicked and set its checked property to true. Note the use of the document.on... which will allow dynamically added content to be targeted as well as static content. Don't forget the $(document).ready... if you don't already have it.;

    $(document).on('click','td',function(){
    $(this).find('input [type="radio"]').prop('checked',true)
    });