HTML / JavaScript When checkbox=True, change 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, Jul 02 '13 at 02:25
Use http://jsfiddle.net/ to provide code (and add it inline as well). — ZenMaster, Jul 02 '13 at 02:32
Actually, just found a [SO question very similar to yours](http://stackoverflow.com/q/5275857/938236), 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, Jul 02 '13 at 02:36

score 2 · Accepted Answer · edited May 23 '17 at 10:32

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?

hi this method selects just first cell, how to select entire row and make it green? — MMG, May 09 '18 at 14:16

score 1 · Answer 2 · answered Jul 02 '13 at 02:41

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

HTML / JavaScript When checkbox=True, change color

2 Answers2