Установите флажок в ячейке таблицы, щелкнув в любом месте ячейки таблицы - PullRequest
Новая
       1

Установите флажок в ячейке таблицы, щелкнув в любом месте ячейки таблицы

7 голосов
/ 16 марта 2012

Я пытаюсь понять, как это сделать, но нигде не могу найти информацию. По сути, у меня есть таблица с каждой ячейкой, содержащей флажок. Я хочу иметь возможность поставить галочку, щелкнув в любом месте ячейки. Я не могу понять, как это сделать, 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>

Ответы [ 7 ]

16 голосов
/ 16 марта 2012

Почему бы не использовать чистое решение 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 голос
/ 18 октября 2016

Мне удалось заставить его работать после применения атрибута '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>
1 голос
/ 16 марта 2012

Вы можете попробовать это, проверить эту скрипку 

$(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);
        }
    });
});
0 голосов
/ 02 октября 2015

Моя функция для проверок в таблице: 

    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);
               }
        }
   }
0 голосов
/ 16 марта 2012

это должно сделать это: 

<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>
0 голосов
/ 16 марта 2012

Я положил здесь демо для вас

В основном вам нужно 

$(function(){
    $("td").click(function(){
        $(this).find('input').attr('checked', true);
    });
});​
0 голосов
/ 16 марта 2012

Вы бы хотели что-то вроде этого.Еще не совсем проснулся, поэтому, вероятно, не будет работать, но в основном: 

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