gmailのチェックボックスのやつ

by kachibito

HTML

<div id="container">

<table border="1" class="xyz">

<tr>
    <th><p><input type="checkbox" id="selectall"/></p></th>
    <th>品名</th>
    <th>個数</th>
    <th>値段</th>
</tr>

<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>うどん</td>
    <td>1杯</td>
    <td>500円</td>
</tr>

<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>フレンチ料理</td>
    <td>1コース</td>
    <td>10000円</td>
</tr>

<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>よっちゃんイカ</td>
    <td>1袋</td>
    <td>30円</td>
</tr>

<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>みかん</td>
    <td>1個</td>
    <td>100円</td>
</tr>

<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>WPテーマ</td>
    <td>1個</td>
    <td>3000円</td>
</tr>


<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="6"/></td>
    <td>お茶</td>
    <td>1杯</td>
    <td>120円</td>
</tr>
    

<tr class="pretty">
    <td align="center"><input type="checkbox" class="case" name="case" value="6"/></td>
    <td>人生</td>
    <td>1回</td>
    <td>プライスレス</td>
</tr>
</table>


</div>

CSS

input,body{
    font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "Osaka", sans-serif ;
    margin:0px;
}

table {
    width: 640px;
    border: 1px solid;
    border-collapse:collapse;
    margin: 0 0 0 20px;
}

th {
    background-color:#e6e8ed;
    color: #555;
    padding: 5px;

}
p{ text-align:center;}
td{padding: 3px;}
table.xyz tr.selected { background-color: #fbee99;}

JavaScript

$(function() {
    
// First add class for pre-checked entries
$("table input[type=checkbox]:checked").each(function() {
    $(this).closest("tr.pretty").addClass("selected");
});

// Toggle when clicked
$("table input[type=checkbox]").live("change", function() {
    $(this).closest("tr.pretty").toggleClass("selected");
});

    // add multiple select / deselect functionality
    $("#selectall").click(function() {
        $('.case').attr('checked', this.checked).closest("tr.pretty").toggleClass("selected");
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function() {
        if ($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked").closest("tr.pretty").toggleClass("selected");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
    
});