テーブルの行ごとクリックしてチェックボックスに対応する
Result
jQuery
$(document).ready(function() {
//tr要素をクリックでイベント発火
$('table tr').click(function() {
//td要素からチェックボックスを探す
var $c = $(this).children('td').children('input[type=checkbox]');
if($c.prop('checked'))
$c.prop('checked', '');
else
$c.prop('checked', 'checked');
});
});
css
table {
margin-left: auto;
margin-right: auto;
width: 80%;
border-collapse: collapse;
background: #fff;
border-top:1px solid #ddd;
}
table tr td,
table tr th {
padding: 10px;
vertical-align: top;
text-align: left;
}
table tr th {
background: #ddd ;
color: #555;
font-weight: bold;
}
table tr td {
cursor: pointer;
border-bottom:1px solid #ddd;
}
table tr:hover {
background: #323232 ;
color: #fff;
}
a, a:visited {
text-decoration: none;
color: #000;
}
a:hover{color: #fff;}
html
<table>
<tr>
<td><input type="checkbox" /></td>
<td>Chrome</td>
<td><a href="http://www.google.co.jp/chrome/">http://www.google.co.jp/chrome/</a></td>
<td>★★★★★</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Firefox</td>
<td><a href="http://mozilla.jp/firefox/">http://mozilla.jp/firefox/</a></td>
<td>★★★★★</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Safari</td>
<td><a href="http://www.apple.com/jp/safari/">http://www.apple.com/jp/safari/</a></td>
<td>★★★★☆</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Opera</td>
<td><a href="http://jp.opera.com/">http://jp.opera.com/</a></td>
<td>★★★★☆</td>
</tr>
</table>
via
Checkbox & Table – Webstuffshare