Chọn hộp kiểm trong ô bảng bằng cách nhấp vào bất kỳ vị trí nào trong ô trong bảng

Tôi đang cố gắng tìm hiểu cách thực hiện việc này, nhưng tôi không thể tìm thấy thông tin ở bất kỳ đâu. Về cơ bản, tôi có một bảng với mỗi ô có chứa một hộp kiểm. Tôi muốn có thể đánh dấu vào hộp kiểm bằng cách nhấp vào bất kỳ đâu trong ô. Tôi không thể tìm ra cách để làm điều đó, javascript sẽ là loại giải pháp tốt nhất cho tôi nhưng tôi cũng có thể sử dụng jQuery.Chọn hộp kiểm trong ô bảng bằng cách nhấp vào bất kỳ vị trí nào trong ô trong bảng

Đây là một dòng của bảng của tôi, tôi muốn làm trong này.

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

Nguồn

2012-03-16 cs_irl

jQuery là JavaScript. – Pointy

-1

này nên làm điều đó:

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

Nguồn

2012-03-16 14:51:03 Tom

Cảm ơn bạn, điều này làm việc hoàn hảo cho tôi. Chỉ còn một câu hỏi nữa, bạn có biết làm thế nào để có được ô bảng thay đổi màu sắc một khi nó được đánh dấu? –

Tôi đã thay đổi mã; nó sẽ hoạt động – Tom

Hoạt động tuyệt vời, cảm ơn.Vấn đề duy nhất tôi có bây giờ là nó chỉ là màu sắc ở phần giữa của tế bào. Đây là một ảnh chụp màn hình của những gì tôi nhận được. http://i.imgur.com/bDrBU.png –

-1

Bạn muốn một cái gì đó như thế này. Không hoàn toàn tỉnh táo, vì vậy có thể sẽ không làm việc, nhưng về cơ bản:

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

Nguồn

2012-03-16 14:44:16

tôi đặt here một bản demo cho bạn

Về cơ bản những gì bạn cần là

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

Nguồn

2012-03-16 14:44:49 themarcuz

Tại sao không sử dụng một tinh khiết Giải pháp CSS? Điều này làm cho việc sử dụng thẻ nhãn để đạt được những gì bạn mong muốn.

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

Đối với một cuộc biểu tình làm việc cao cấp hơn, check this out http://jsfiddle.net/8q5TQ/7/

Nguồn

2012-03-16 14:47:38 Sushil

http://jsfiddle.net/qqc8U/ đây là ví dụ về việc sử dụng HTML do bạn cung cấp – Sushil

Đã cố gắng điều này, không hoạt động trên bảng của tôi vì một số lý do? –

+1 Tôi sắp đăng một câu trả lời tương tự, nhưng bạn đánh tôi với cú đấm, vì vậy tôi chỉ dán HTML của tôi vào câu trả lời của bạn. Tôi hy vọng điều đó ổn. Nếu không, hãy nhấp vào nút chỉnh sửa và sử dụng menu thả xuống ở đầu biểu mẫu chỉnh sửa để quay lại. –

Bạn có thể thử này, 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); 
     } 
    }); 
});

Nguồn

2012-03-16 14:48:54

Chức năng của tôi để kiểm tra trong bảng:

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

Nguồn

2015-10-02 07:29:24

Vui lòng giải thích câu trả lời của bạn, câu trả lời duy nhất của 'code' không được khuyến khích! –

tôi đã có thể để có được nó làm việc sau khi áp dụng 'cho' thuộc tính đến yếu tố nhãn:

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

Nguồn

2016-10-18 19:32:39

Chọn hộp kiểm trong ô bảng bằng cách nhấp vào bất kỳ vị trí nào trong ô trong bảng

Trả lời

Các vấn đề liên quan