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

问题描述：

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

jQuery是JavaScript的。 – Pointy 2012-03-16 14:38:27

答

这应该这样做：

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

谢谢，这对我来说非常合适。还有一个问题，你知道如何让表格单元在被勾选后改变颜色吗？ – 2012-03-16 15:02:04

我改变了代码;它应该工作 – Tom 2012-03-16 15:03:56

伟大工程，谢谢。我现在唯一的问题是，它只是在单元的中间部分着色。这里是我得到的截图。 http://i.imgur.com/bDrBU.png – 2012-03-16 15:24:02

答

你会想这样的事情。没有清醒过来呢，所以可能不会工作，但基本上是：

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

答

我把here你

演示基本上你需要的是

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

答

为什么不使用纯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/

http://jsfiddle.net/qqc8U/下面是使用您提供的HTML的示例 – Sushil 2012-03-16 14:55:04

试过这个，出于某种原因在我的桌子上不工作？ – 2012-03-16 14:57:08

+1我准备发表类似的答案，但是你打败了我，所以我只是将HTML粘贴到你的答案中。我希望没关系。如果没有，请单击编辑按钮，然后使用编辑表单顶部的下拉菜单进行回滚。 – 2012-03-16 15:01:01

答

你可以试试这个，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); 
     } 
    }); 
});

答

我的功能检查表格：

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

请解释你的答案，'代码'只有答案是非常沮丧！ – 2015-10-02 09:00:09

答

我能得到它应用“的”属性的标签元素后的工作：

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

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

相关推荐