HTML / JavaScript When checkbox=True, change <TD> color

Question

Being out of programming for several years, I'm attempting what I thought would be a relatively basic HTML form, and have come across several things I no longer know how to do.

First, I have a 5x10 table of checkboxes. Whenever any box is checked, I would like the same code to execute, (If 4 checkboxes are already checked, throw an error, otherwise continue).

How do I get this code to run on all checkboxes without needing to add an "onclick" to every individual button?

Second, when a checkbox is selected, I would like to change the background color of the element it is contained within.

And finally, is there an easy way to replace the checkbox image with a numbered ball or labeled button?

As requested, my code, so far, is here: https://www.dropbox.com/s/mem6egamsojq18g/DrawTicket.html

For the color, you can do this purely with CSS3. For the first bit I could only answer with jquery (javascript framework) (; — Francisco Presencia
– Francisco Presencia, Commented Jul 2, 2013 at 2:25
Use jsfiddle.net to provide code (and add it inline as well). — ZenMaster
– ZenMaster, Commented Jul 2, 2013 at 2:32
Actually, just found a SO question very similar to yours, it is done using the :checked CSS pseudo-class. If it was the only question you asked it'd be a dup. Note the lack of support for IE 6-8. — Francisco Presencia
– Francisco Presencia, Commented Jul 2, 2013 at 2:36

Community · Accepted Answer · 2017-05-23 10:32:07Z

2

Well, here is a bit hackish, pure JS version. Should get you started fine...

HTML:

<table id="table">
    <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
</table>

CSS, just for visual aid:

td {
    border: 1px solid #cccccc;
}

td.checked {
    background: #ff0000;
}

JS:

var handler = function(event) {
    if(event.target.parentNode.className.indexOf('checked') < 0 ) {
        event.target.parentNode.className += ' checked';
    } else {
        event.target.parentNode.className = 
                event.target.parentNode.className.replace(' checked', '');
    }
};

var table = document.getElementById('table');
table.addEventListener('click', handler);

And JSFiddle to play with.

P.S.

As for replacing it with image - there is plenty of solutions online, most of them are not cross browser - see here: How to style checkbox using CSS?

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Jul 2, 2013 at 2:45

ZenMaster

12.8k5 gold badges40 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MMG Over a year ago

hi this method selects just first cell, how to select entire row and make it green?

MMG Over a year ago

can you help me with that?

Aguardientico · Accepted Answer · 2013-07-02 02:41:21Z

1

I think the easier way is using jquery so: In the head section (or as last element in the body)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('input:checkbox').click(function(){
      if ($(this).is(':checked')) {
        $(this).parent().css('background-color', 'green');
      } else {
        $(this).parent().css('background-color', 'white');
      }
    });
  });
</script>

I'm thinking a good solution for the third question

answered Jul 2, 2013 at 2:41

Aguardientico

7,7991 gold badge36 silver badges34 bronze badges

Collectives™ on Stack Overflow

HTML / JavaScript When checkbox=True, change <TD> color

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related