通过单击表格单元格中的任意位置来勾选表格单元格中的复选框答案

【问题标题】：Tick a checkbox in a table cell by clicking anywhere in the table cell通过单击表格单元格中的任意位置来勾选表格单元格中的复选框
【发布时间】：2012-04-02 02:43:49
【问题描述】：

我正试图弄清楚如何做到这一点，但我无法在任何地方找到相关信息。基本上，我有一个表格，每个单元格都包含一个复选框。我希望能够通过单击单元格内的任意位置来勾选复选框。我不知道该怎么做，Javascript 对我来说是最好的解决方案，但我也可以使用 jQuery。

这是我希望在我的表中执行此操作的一行：

<tr>
    <td><center>9:00 - 10:00</center></td>
    <td><center><input type="checkbox" name="free" value="mon09"></center></td>
    <td><center><input type="checkbox" name="free" value="tue09"></center></td>
    <td><center><input type="checkbox" name="free" value="wed09"></center></td>
    <td><center><input type="checkbox" name="free" value="thu09"></center></td>
    <td><center><input type="checkbox" name="free" value="fri09"></center></td>
</tr>

【问题讨论】：

标签： javascript jquery html-table

【解决方案1】：

为什么不使用纯 CSS 解决方案？这利用标签标签来实现你想要的。

<tr>
    <td><center>9:00 - 10:00</center></td>
    <td><label><input type="checkbox" name="free" value="mon09"></label></td>
    <td><label><input type="checkbox" name="free" value="tue09"></label></td>
    <td><label><input type="checkbox" name="free" value="wed09"></label></td>
    <td><label><input type="checkbox" name="free" value="thu09"></label></td>
    <td><label><input type="checkbox" name="free" value="fri09"></label></td>
</tr>

<style type="text/css">
    td label { 
       display: block;
       text-align: center;
    }
</style>

如需更高级的工作演示，请查看http://jsfiddle.net/8q5TQ/7/

【讨论】：

+1 我正要发布一个类似的答案，但你打败了我，所以我只是将我的 HTML 粘贴到你的答案中。我希望没关系。如果没有，请点击编辑按钮，然后使用编辑表单顶部的下拉菜单进行回滚。
只要它有帮助并回答了我完全可以接受的问题 :) 随时编辑回复（你解释得比我做得好；））
这似乎是一个非常好的解决方案，但同样，由于某种原因，它在我的桌子上不起作用。
@OisínDorgan 只是一个疯狂的猜测，肯定有一些其他的 CSS 属性把事情搞砸了，所以你可能想看看 table、tr、td 和 label 继承的所有 CSS 属性跨度>
再次感谢您。使用 CSS 选择单元格后，是否有任何方法可以更改单元格的颜色？

【解决方案2】：

你可以试试这个，check this fiddle

$(function(){
    $('table tr td').on('click', function(e){
        if(e.target.type=="checkbox")
        {        
            if($(this).is(':checked')) $(this).attr('checked', false);
            else $(this).attr('checked', true);
            return;
        }
        else
        {
            if($(this).find('input:checkbox').is(':checked')) 
                $(this).find('input:checkbox').attr('checked', false);
            else
                $(this).find('input:checkbox').attr('checked', true);
        }
    });
});

【讨论】：

【解决方案3】：

在将“for”属性应用于标签元素后，我能够让它工作：

<tr>
    <td><center>9:00 - 10:00</center></td>
    <td><label for="mon09"><center><input type="checkbox" name="free" value="mon09" id="mon09"></center></label></td>
    <!-- etc. -->
</tr>

【讨论】：

【解决方案4】：

应该这样做：

<html>
    <head>
        <script type="text/javascript">
            function onload() {
                var tds = document.getElementsByTagName("td");
                for(var i = 0; i < tds.length; i++) {
                    tds[i].onclick = 
                                    function(td) { 
                                        return function() { 
                                            tdOnclick(td); 
                                        }; 
                                    }(tds[i]); 
                }
                var inputs = document.getElementsByTagName("input");
                for(var i = 0; i < inputs.length; i++) {
                    inputs[i].onclick = 
                                    function(input){ 
                                        return function() { 
                                            inputOnclick(input); 
                                        };
                                    }(inputs[i]); 
                }
            }
            function tdOnclick(td) {
                for(var i = 0; i < td.childNodes.length; i++) {
                    if(td.childNodes[i].nodeType == 1) {
                        if(td.childNodes[i].nodeName == "INPUT") {
                            if(td.childNodes[i].checked) {
                                td.childNodes[i].checked = false;
                                td.style.backgroundColor = "red";
                            } else {
                                td.childNodes[i].checked = true;
                                td.style.backgroundColor = "green";
                            }
                        } else {
                            tdOnclick(td.childNodes[i]);
                        }
                    }
                }
            }
            function inputOnclick(input) {
                input.checked = !input.checked;
                return false;
            }
        </script>
    </head>
    <body onload="onload()">
        <table>
            <tr>
                <td><center>9:00 - 10:00</center></td>
                <td><center><input type="checkbox" name="free" value="mon09"></center></td>
                <td><center><input type="checkbox" name="free" value="tue09"></center></td>
                <td><center><input type="checkbox" name="free" value="wed09"></center></td>
                <td><center><input type="checkbox" name="free" value="thu09"></center></td>
                <td><center><input type="checkbox" name="free" value="fri09"></center></td>
            </tr>
        </table>
    </body>
</html>

【讨论】：

谢谢，这对我来说非常有效。还有一个问题，你知道如何让表格单元格在勾选后改变颜色吗？
效果很好，谢谢。我现在唯一的问题是它只是在单元格的中间部分着色。这是我得到的截图。 i.imgur.com/bDrBU.png
我不能说如何解决这个问题，除非用萤火虫检查它；我怀疑造成这种情况的原因是单元格间距或边框。
是的，我用过萤火虫，当我将鼠标悬停在单元格上时，正确的区域会突出显示。我的 CSS 中有一些单元格间距，不知道我将如何修复它。

【解决方案5】：

我为你放了here一个演示

基本上你需要的是

$(function(){
    $("td").click(function(){
        $(this).find('input').attr('checked', true);
    });
});

【讨论】：

【解决方案6】：

我的表格检查功能：

    function Checkpoint() {
      var chks = document.getElementById("idmytable").getElementsByTagName("input");
    for (var i=0; i<chks.length; i++) 
        {
            if (chks[i].type == "checkbox" &  chks[i].checked==true)
               {
                    alert(chks[i].id);
               }
        }
   }

【讨论】：

请解释你的答案，code 非常不鼓励只回答！

【解决方案7】：

在我的例子中，我不能使用优雅的 CSS label 技术，因为 td 元素中的填充阻止了 label 填充整个单元格，并且使用的框架使得计算负标签填充不切实际.

这个 jquery sn-p 将一个click 事件附加到td，只要原始事件目标不是复选框本身，它将切换复选框（省略此检查，它会显示直接点击复选框确实什么都没有，因为它将被双重处理）。此外，将调用change 事件以确保调用您的 UI 处理程序。

$("td").on("click", function (event) {
  if (!$(event.target).is("input[type='checkbox']")) {
    cb = $("input:checkbox", this)
    cb.prop("checked", !cb.prop("checked"))
    cb.change()
  }
})

更改td 选择器以适合您的页面结构。

【讨论】：

【解决方案8】：

你会想要这样的东西。还没有完全清醒，所以可能行不通，但基本上：

$('input[type="checkbox"]').each(function() { // find all checkboxes
   $(this).parent('td').click(function() { // find the td containing the checkbox
      // attach a click even to the td which toggles the checkbox within
      cb = $(this).children('input[type="checkbox"]'); 
      cb.checked = !cb.checked;
   });
});

【讨论】：