Change DIV color checkbox onclick IN LOOP

Question

I have searched for several hours now trying to implent scripts to change the div background. I've found this solution which works when it's not in a loop:

Javascript: onClick checkbox change div color

The challenge here is that the checkboxes is in a foreach loop with unique id values.

Here is my code:

<script language="JavaScript" type="text/JavaScript">
function myFunction(x, _this) {
  if (_this.checked) {
    x.style.backgroundColor = '#0000FF';
  } else  {
    x.style.backgroundColor = '#FF0000';
  }
}
</script>
<style type="text/css">
#result {
  background-color: #FF0000;
  padding: 7px;
  margin: 7px;
}
</style>
</head>

<body>
 <?php
    $SL = 0;
    foreach($results_resultat as $key => $row_resultat) { ?>
<div id="result">
  <input type="checkbox" name="res_id[]" value="<?php echo $row_resultat['id']; ?>" onChange="myFunction(result, this)">
</div>
<?php } ?>

With this code it will show all the rows which are selected from the tabel but it won't change the div color when clicking the checkbox.

Help is very much appreciated. :-)

@Xufox, `result` will be referring to the div element with id `result` as browsers add elements with ids to the global scope as that id. The problem is they are creating multiple divs with the same id so only one gets affected — Patrick Evans, Sep 03 '17 at 16:50

score 1 · Accepted Answer · answered Sep 03 '17 at 16:52

1

You're using the same id result to wrap all your checkbox elements. ids should be unique, use class="result" instead to wrap your checkbox elements. Plus, you don't have to send anything except this to myFunction function. So change your code in the following way,

CSS

.result {
    background-color: #FF0000;
    padding: 7px;
    margin: 7px;
}

PHP

<?php
    $SL = 0;
    foreach($results_resultat as $key => $row_resultat) { ?>
        <div class="result">
            <input type="checkbox" name="res_id[]" value="<?php echo $row_resultat['id']; ?>" onChange="myFunction(this)">
        </div>
        <?php 
    } 
?>

JavaScript

function myFunction(_this) {
    if (_this.checked) {
        _this.parentElement.style.backgroundColor = '#0000FF';
    } else  {
        _this.parentElement.style.backgroundColor = '#FF0000';
    }
}

answered Sep 03 '17 at 16:52

Rajdeep Paul

16,887
3
18
37

Thanks. It works.. :-) Can you tell me how I can make the change by clicking the DIV layer? I have tried with:
but this only colored the whole page
– Kenneth Sep 03 '17 at 17:58
I found the solution.. And of course it's so simple as just put around it and id it.. :-) So the result to this is:

Well I also added a class which the actual checkbox transparent.. – Kenneth Sep 03 '17 at 18:16
@Kenneth Glad my answer helped you in resolving the issue. :-) *Cheers!* – Rajdeep Paul Sep 03 '17 at 18:20

score 0 · Answer 2 · answered Sep 03 '17 at 16:51

The problem with your code is that line: onChange="myFunction(result, this)". At that line result is not defined, usually it is common to pass a string with selector, or string with an id. Something like that onChange="myFunction('result', this)"

And then in you JS function use document.getElementById to get a reference to the DOM element.

<script language="JavaScript" type="text/JavaScript">
function myFunction(id, _this) {
  if (_this.checked) {
    document.getElementById(id).style.backgroundColor = '#0000FF';
  } else  {
    document.getElementById(id).style.backgroundColor = '#FF0000';
  }
}
</script>

Change DIV color checkbox onclick IN LOOP

2 Answers2