Table Input click options

by jacobwsmith

HTML

<div id="groupingContainer">
	<div id="groupingDivHeader">
		<span onclick="toggleAdids(this)" class="cell1">
			<input type="checkbox" onclick="toggleAdids()">
		</span><span class="cell2">Creative</span>
	</div>
	<div id="groupingTableDiv" style="overflow: hidden;">
		<table id="groupingTable">
			<thead style="display: none;">
				<tr>
					<th>header 1</th><th class="header headerSortDown">header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr style="cursor: pointer;" class="">
					<td>
                        <input type="checkbox" class="adid" adid="homepage"/>
					</td>
                    <td class="gtcell2">homepage</td>
				</tr>
				<tr style="cursor: pointer;" class="">
					<td>
					<input type="checkbox" class="adid" adid="huffpostfrontpage">
					</td><td class="gtcell2">huffpostfrontpage</td>
				</tr>
				<tr style="cursor: pointer;" class="">
					<td>
					<input type="checkbox" class="adid" adid="huffposttvmain">
					</td><td class="gtcell2">huffposttvmain</td>
				</tr>
				<tr style="cursor: pointer;" class="">
					<td>
					<input type="checkbox" class="adid" adid="video">
					</td><td class="gtcell2">video</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

CSS

table, td{
    border: solid #cccccc 1px;
}
.groupOn{
    background-color: LightYellow;
}

JavaScript

var _GLOBAL;
var groupToggle = function(row){
	var $row = $(row),
	$checkbox = $row.find('input:first'),
	$new_value = $checkbox.prop('checked');

    _GLOBAL = $checkbox;
    
	console.log('start groupToggle: ' + $row.html());

	if ($new_value) {
        console.log('$new_value: ' + $new_value);
        $checkbox.removeAttr('checked');
        $row.removeClass('groupOn');
    } else {
        console.log('$new_value: ' + $new_value);
        $checkbox.attr('checked', 'checked');
        $row.addClass('groupOn');
    }

    console.log('end groupToggle: ' + $row.html());
    return false;
};

$('#groupingTable tr').click(function(){
    groupToggle(this);
});