通過單擊表單元格中的任意位置來勾選表格單元格中的複選框

我試圖弄清楚如何做到這一點，但是我找不到任何地方的信息。基本上，我有一個表格，每個單元格包含一個複選框。我希望能夠通過單擊單元格內的任何位置來勾選複選框。我無法弄清楚如何去做，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>

來源

2012-03-16 cs_irl

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

-1

這應該這樣做：

<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 14:51:03 Tom

謝謝，這對我來說非常合適。還有一個問題，你知道如何讓表格單元在被勾選後改變顏色嗎？ – 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

-1

你會想這樣的事情。沒有清醒過來呢，所以可能不會工作，但基本上是：

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

來源

2012-03-16 14:44:16

我把here你

演示基本上你需要的是

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

來源

2012-03-16 14:44:49 themarcuz

爲什麼不使用純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/

來源

2012-03-16 14:47:38 Sushil

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

來源

2012-03-16 14:48:54

我的功能檢查表格：

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 07:29:24

請解釋你的答案，'代碼'只有答案是非常沮喪！ – 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>

來源

2016-10-18 19:32:39

通過單擊表單元格中的任意位置來勾選表格單元格中的複選框

回答

相關問題