使用输入类型=“复选框”填充表格单元格

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

Answer 2

为什么不试试this method

HTML

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

</table>

CSS

td{
    position:relative;
    border:1px solid grey;
    overflow:hidden;
}
label{
    background:red;
    text-align:center;
    position:relative;
    padding:50px;
    margin:-5px;
}
input{
    position:absolute;
}

Answer 3

只需用它来填充你的td，

$('td').append($('<input/>',{'type':'checkbox'}));

DEMO

供您参考：

• .append()
• element creation

---

更新

使用以下代码段来满足您的需求，

$('td').click(function(){
    $(this).children('input').click();
});

DEMO