Question

我正在试图弄清楚如何做到这一点，但我找不到它。基本上我希望能够点击表格行的任何地方，它会检查/取消选中它的复选框。我知道这是可能的，因为这就是PHPMyAdmin所做的......

这是我的表格行

<tbody>
<tr id="1" onclick="selectRow(1)"><td width="20px"><input type="checkbox" id="1" name="1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>

<tr id="2" onclick="selectRow(2)"><td width="20px"><input type="checkbox" id="2" name="2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>

</tbody>

Answer 1

<script type="text/javascript">
function selectRow(row)
{
    var firstInput = row.getElementsByTagName('input')[0];
    firstInput.checked = !firstInput.checked;
}
</script>

...

<tbody>
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk1" name="chk1/"></td><td>1</td><td>2011-04-21 22:04:56</td><td>action</td></tr>    
    <tr onclick="selectRow(this)"><td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td>2</td><td>2011-04-21 22:04:56</td><td>action</td></tr>  
</tbody>

_{注意：您还会在ID上发生冲突。你的ID应该是唯一的。}

以下是编程绑定的替代方法：

(function () {
    function rowClick(e) {
        // discard direct clicks on input elements
        if (e.target.nodeName === "INPUT") return;
        // get the first checkbox
        var checkbox = this.querySelector("input[type='checkbox']");
        if (checkbox) {
            // if it exists, toggle the checked property
            checkbox.checked = !checkbox.checked;
        }
    }
    // iterate through all rows and bind the event listener
    [].forEach.call(document.querySelectorAll("tr"), function (tr) {
        tr.addEventListener("click", rowClick);
    });
})();

<table>
    <tbody>
        <tr>
            <td>
                <input type="checkbox" id="chk1" name="chk1" />
            </td>
            <td>1</td>
            <td>2011-04-21 22:04:56</td>
            <td>action</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk2" name="chk2" />
            </td>
            <td>2</td>
            <td>2011-04-21 22:04:56</td>
            <td>action</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="chk2" name="chk3" />
            </td>
            <td>2</td>
            <td>2011-04-21 25:30:16</td>
            <td>action</td>
        </tr>
    </tbody>
</table>

Answer 2

您不需要JavaScript：

＆＃13;

td label {
  display: block;
}

＆＃13;

<td width="20px"><input type="checkbox" id="chk2" name="chk2/"></td><td><label for="chk2">2</label></td><td><label for="chk2">2011-04-21 22:04:56</label></td><td><label for="chk2">action</label></td>

＆＃13;

只是标签和一点CSS。

Answer 3

试试这个...

$("tr").click(function() {
    var checkbox = $(this).find("input[type='checkbox']");
    checkbox.attr('checked', !checkbox.attr('checked'));
});

http://jsfiddle.net/dVay8/

点击表格行的任意位置，它会在...中选中复选框？

3 个答案: