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
– Patrick Evans, Commented Sep 3, 2017 at 16:50

Rajdeep Paul · Accepted Answer · 2017-09-03 16:52:37Z

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 3, 2017 at 16:52

Rajdeep Paul

16.9k3 gold badges21 silver badges39 bronze badges

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

3 Comments

Kenneth Over a year ago

Thanks. It works.. :-) Can you tell me how I can make the change by clicking the DIV layer? I have tried with: <div class="result" onClick="myFunction(this)"> but this only colored the whole page

Kenneth Over a year ago

I found the solution.. And of course it's so simple as just put <label> around it and id it.. :-) So the result to this is: <label ="res_id[]"> <div class="result"> <input type="checkbox" name="res_id[]" id="res_id[]" value="<?php echo $row_resultat['id']; ?>" onChange="myFunction(this)" class="trans"> </div> </label> Well I also added a class which the actual checkbox transparent..

Rajdeep Paul Over a year ago

@Kenneth Glad my answer helped you in resolving the issue. :-) Cheers!

felixmosh · Accepted Answer · 2017-09-03 16:51:54Z

0

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>

answered Sep 3, 2017 at 16:51

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Collectives™ on Stack Overflow

Change DIV color checkbox onclick IN LOOP

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related