Checkboxes in a table
by Joe Saad
HTML
<!--
table>thead(>tr>th(>input:checkbox[id="selectAll"][name="selectAll"])+th{Student ID}+th{Name}+th)+tbody(>tr*5>td(>input:checkbox[id="choice$"][name="choice$"])+td>label[for="choice$"]{900-00-000$}+td{John$}+td>a[href="#"]{View More})
-->
<table>
<thead>
<tr>
<th><input type="checkbox" name="selectAll" id="selectAll"></th>
<th>Student ID</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice1" id="choice1"></td>
<td>
<label for="choice1">900-00-0001</label>
<td>John1</td>
<td><a href="#">View More</a></td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="choice2" id="choice2"></td>
<td>
<label for="choice2">900-00-0002</label>
<td>John2</td>
<td><a href="#">View More</a></td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="choice3" id="choice3"></td>
<td>
<label for="choice3">900-00-0003</label>
<td>John3</td>
<td><a href="#">View More</a></td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="choice4" id="choice4"></td>
<td>
<label for="choice4">900-00-0004</label>
<td>John4</td>
<td><a href="#">View More</a></td>
</td>
</tr>
<tr>
<td><input type="checkbox" name="choice5" id="choice5"></td>
<td>
<label for="choice5">900-00-0005</label>
<td>John5</td>
<td><a href="#">View More</a></td>
</td>
</tr>
</tbody>
</table>
<button type="button">Submit</button>
<a href="http://www.cnn.com">BBC</a>
CSS
.errdCell {background-color: #FFC6C6;}
JavaScript
$('#selectAll').click(function(){
if ($(this).is(':checked')){
$(this).closest('table').find('input').prop('checked','checked');
}
else {
$(this).closest('table').find('input').prop('checked','');
}
});
$('button').click(function(){
if (!($('table :checkbox').is(':checked'))) {
//alert('error');
$('td:nth-child(1)').addClass('errdCell');
} else {
$('td:nth-child(1)').removeClass('errdCell');
}
});
$('a').click(function(e){
e.preventDefault();
window.location.href = "http://www.bbcworld.com";
});