jquery - 使用输入类型 ="checkbox"填充表格单元格

Question

我有带有复选框的表格单元格。我想要的是整个表格单元格的工作方式就像您单击复选框一样。

如何实现这一目标？

Answer 1

这是您要找的吗？

<小时/>

CSS Method - 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 Method - 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'));
});