Unable to uncheck checkbox from chrome

I am trying to check/uncheck a checkbox/radiobutton both from the table cell as well as the actual checkbox /radiobutton

I have written this below code to select a checkbox/radiobutton from table cell Please refer code pen for actuall code.

The code works fine for IE 11 browser but not in Chrome. If i select the table cell then the checkbox is selected but in chrome when i check on the actual check box nothing happens .

I think it is the checkbox internally calls the PropagateBelow method.

Check/Uncheck check box for chrome(Select on the CHECKBOX itself on TABLE CELL works fine)

<table border="1">
        <tr>
            <td onclick="PropagateBelow(this);" style="width:100px;">
                <input type="checkbox" id="test" value="Test123" />
            </td>
        </tr>

function PropagateBelow(tableCell) {
    alert(tableCell);
    var radioButtons = tableCell.getElementsByTagName('input');
    for (var i = 0; i < radioButtons.length; i++) {
        var radioButton = radioButtons[i];
        if (radioButton != null && radioButton != undefined) {
            if (radioButton.type == 'radio' || radioButton.type == 'checkbox') {
                radioButton.click();
            }
        }
    }
}