Edit in JSFiddle

            $(document).ready(function() {
                $('input[type=checkbox]').click(function() {
                  var t = $(this).prop;
                    if(t('checked'))
                        t('checked', '');
                    else
                        t('checked', 'checked');
                });
                
                $('table tr').click(function() {
                  var c = $(this).children('td').children('input[type=checkbox]');
                    if(c.prop('checked'))
                        c.prop('checked', '');
                    else
                        c.prop('checked', 'checked');
                }); 
            });

<table>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Chrome</td>
            <td>Google提供の高速ブラウザ。エクステンション豊富。</td>
            <td>★★★★★</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Firefox</td>
            <td>人気の火狐。アドオンが魅力的過ぎ</td>
            <td>★★★★★</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Safari</td>
            <td>Mac標準。iPhoneの登場でシェアは伸びるのか？</td>
            <td>★★★★☆</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>Opera</td>
            <td>目立たないけど実は高性能。もうちょい人気出てもいい</td>
            <td>★★★★☆</td>
        </tr>
    </table>

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, a:hover {
    text-decoration: none;
    color: #000;
}