CODEWITHSUNDEEP
javascriptjqueryhtml-table
cs_irl
cs_irl

Reputation: 187

Tick a checkbox in a table cell by clicking anywhere in the table cell

I'm trying to figure out how to do this, but I can't find the information anywhere. Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell. I can't figure out how to do it, Javascript would be the best type of solution for me but I could also use jQuery.

Here is a row of my table I wish to do this in:

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

Upvotes: 10

Views: 11850

Answers (8)

Andy Brown
Andy Brown

Reputation: 12999

In my case I couldn't use the elegant CSS label technique because padding in the td element prevented the label from filling the whole cell and the framework in use made it impractical to calculate a negative label padding.

This jquery snippet attaches a click event to the td that will toggle the checkbox as long as the original event target was not the checkbox itself (omit this check and it will appear that directly hitting the checkbox does nothing because it will be double-processed). Additionally, the change event will be invoked to ensure that your UI handlers are called.

$("td").on("click", function (event) {
  if (!$(event.target).is("input[type='checkbox']")) {
    cb = $("input:checkbox", this)
    cb.prop("checked", !cb.prop("checked"))
    cb.change()
  }
})

Change the td selector to suit your page structure.

Upvotes: 0

Kit.net
Kit.net

Reputation: 31

I was able to get it working after applying the 'for' attribute to the label element:

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

Upvotes: 1

Arthur Savage
Arthur Savage

Reputation: 31

My Function for checks in table :

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

Upvotes: 0

Tom
Tom

Reputation: 4180

this should do it:

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

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

You may try this, 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);
        }
    });
});

Upvotes: 1

Sushil
Sushil

Reputation: 383

Why not use a pure CSS solution? This makes use of label tag to achieve what you desire.

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

For a more advanced working demonstration, check this out http://jsfiddle.net/8q5TQ/7/

Upvotes: 19

themarcuz
themarcuz

Reputation: 2583

I put here a demo for you

Basically what you need is

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

Upvotes: 0

Marc B
Marc B

Reputation: 360672

You'd want something like this. Not quite awake yet, so probably won't work, but basically:

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

Upvotes: -1

Related Questions