Question

我正在试图弄清楚如何做到这一点，但我无法在任何地方找到这些信息。基本上，我有一个表格，每个单元格都包含一个复选框。我希望能够通过单击单元格内的任何位置来勾选复选框。我无法弄清楚如何做到这一点，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>

Answer 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/

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

Answer 3

在将'for'属性应用于label元素后，我能够使它工作：

<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>

Answer 4

我为你准备了here演示

基本上你需要的是

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

Answer 5

这应该这样做：

<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>

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

Answer 7

就我而言，我无法使用优雅的 CSS label 技术，因为 td 元素中的填充阻止了 label 填充整个单元格，并且正在使用的框架使其不切实际计算负标签填充。

这个 jquery 代码段将一个 click 事件附加到 td 上，只要原始事件目标不是复选框本身，它就会切换复选框（省略这个检查，它会出现直接点击checkbox 什么都不做，因为它会被双重处理）。此外，将调用 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 选择器以适合您的页面结构。

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

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

8 个答案: