用输入类型=“ checkbox”填充表格单元格

Question

我有带复选框的表格单元格。我想要的是整个表格单元格都可以正常工作，就像您单击复选框一样。

如何实现呢？

Answer 1

这是你想要的？

CSS方法-JSFiddle

的HTML

<table>
    <tr>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
    </tr>
    <tr>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
        <td><label><input type="checkbox" /></label></td>
    </tr>
</table>

的CSS

table{
    border-collapse:collapse;
}
td{
    padding:0px;
    border:solid 1px #000000;
}
label{
    display:block;
    padding:20px;
}

jQuery方法-JSFiddle

的HTML

<table>
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>
</table>

的CSS

table{
    border-collapse:collapse;
}
td{
    padding:20px;
    border:solid 1px #000000;
}

jQuery的

$(document).on('click', 'td', function(){
    var target = $(this).find('input[type="checkbox"]');

    // If it's checked then uncheck it and vice versa
    target.prop('checked', !target.prop('checked'));
});