Radio button select on cell click

Question

I would like to have a radio button become checked when clicking on the cell in which it resides. Also the background color of the cell should change.

I have managed to get the cell to change background color when it is clicked but I want it to also select the radio button in addition to changing the background color.

I am new to javascript and i have got the jsfiddle working below based on other examples but cannot figure out the rest (tried a lot of different things)

http://jsfiddle.net/Lude352m/1/

Javascript:

  $('.custom-matrix tr').click(function (e) {
    console.log("Inside #out code");
    var cell = $(e.target).get(0); // This is the TD you clicked

    //if (cell.nodeName != 'TD') cell = $(cell).closest('td').get(0);

    // Remove the background color for all cells
    var c = $(cell).parents('tr').children('td');
    $(c).each(function () {
        $(c).removeClass('info');
    });

    // Add the background color for the clicked cell
    $(cell).addClass("info")//.parent().siblings("tr").find("td.info").removeClass("info");

    var rad = $(cell).children('input');
    console.log("Radio: " + rad);
    //for(var key in rad) {
    //    console.log('key: ' + key + '\n' + 'value: ' + rad[key]);
    //}
    $(rad).prop("checked", true)

    // Output code to help (but will be removed once working)        
    // Empty the div '#out' (clear its contents)
    $('#out').empty();   
    var tr = $(this); // This is the TR (row) you clicked
    // Loop through the TD's within the TR ?? i think? 
    // The 'i' is used as a counter but not sure how it increases each loop
    $('td', tr).each(function (i, td) {
        $('#out').html(

            //Cumulatively add the result of each TR (row) to the '#out' div's contents
            $('#out').html() + '<br>' + i + ': ' + $(td).text() + (td === cell ? ' [clicked]' : '')
        );
    });

Answer 1

Try this code

$(cell).find("input").attr('checked', true);

or

$(cell).find("input").prop('checked', true);

Here is a working Fiddle

Answer 2

Your radio inputs are not a direct child of your <td>, but a child of the <label> inside the <td>, so

var rad = $(cell).children('input');

need to be changed to either

var rad = $(cell).children().children('input');

OR using .find()

var rad = $(cell).find('input');