JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Option 1: .toggle()</h2>
<table id="ContentPlaceHolder1_chkILike" class="poll_option one">
    <tbody><tr>
        <td><input id="ContentPlaceHolder1_chkILike_0" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$0" value="phones"><label for="ContentPlaceHolder1_chkILike_0">I like to see hot news and cool phones</label></td>
    </tr><tr>
        <td class=""><input id="ContentPlaceHolder1_chkILike_1" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$1" value="guides"><label for="ContentPlaceHolder1_chkILike_1">I like to see helpful tips &amp; guides</label></td>
    </tr><tr>
        <td class=""><input id="ContentPlaceHolder1_chkILike_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$2" value="deals"><label for="ContentPlaceHolder1_chkILike_2">I like to see loads of offers and deals</label></td>
    </tr><tr>
        <td><input id="ContentPlaceHolder1_chkILike_3" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$3" value="competitions"><label for="ContentPlaceHolder1_chkILike_3">I like to see lots of competitions</label></td>
    </tr>
    </tbody></table>
<h2>Option 2: .click()</h2>
<table id="ContentPlaceHolder1_chkILike" class="poll_option two">
    <tbody><tr>
        <td><input id="ContentPlaceHolder1_chkILike_0b" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$0" value="phones"><label for="ContentPlaceHolder1_chkILike_0b">I like to see hot news and cool phones</label></td>
    </tr><tr>
        <td class=""><input id="ContentPlaceHolder1_chkILike_1b" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$1" value="guides"><label for="ContentPlaceHolder1_chkILike_1b">I like to see helpful tips &amp; guides</label></td>
    </tr><tr>
        <td class=""><input id="ContentPlaceHolder1_chkILike_2b" type="checkbox" name="ctl00$ContentPlaceHolder1$chkILike$2" value="deals"><label for="ContentPlaceHolder1_chkILike_2b">I like to see loads of offers and deals</label></td>
    </tr><tr>
        <td><input...

CSS

.poll_option 
{
    width: 408px;
    border-collapse: separate;
    border-spacing: 5px;
    *border-collapse: expression('separate', cellSpacing = '5px');     
}
.poll_option td {
    text-align:left;
    width:298px;
    /*height:42px;*/
    background-color:grey;
    font-weight:bold;
    font-size:1.1em;
    /*margin-bottom:7px;*/
    cursor: pointer;
    vertical-align: middle;
}
.poll_option input {margin:15px 13px 14px;vertical-align: middle; height: 12px;}
.poll_form {width: 302px; margin: 0 auto;text-align:center;}
.poll_option td.highlight {
    background-color: pink;
    color: #fff !important;
}

JavaScript

$('.poll_option.one td').toggle(function(e) {
    $(this).addClass('highlight');
    alert("check");
    if (!$(this).hasClass("dontChange")) {
       $(this).find('input').prop("checked", true);
    }
    $(this).removeClass("dontChange");
    console.log(e.target.nodeName);
}, function(e) {
    $(this).removeClass('highlight');
    if (!$(this).hasClass("dontChange")) {
        $(this).find('input').prop("checked", false);
    }
    $(this).removeClass("dontChange");
    console.log(e.target.nodeName);
});

$("[type='checkbox']").change(function(e) {
    alert("hum");
    $(this).parent().addClass("dontChange");
});