Change color if checkbox is checked - onchange event

Question

I'm trying o change the background color of a div if a checkbox is checked.

It's working for the div outside the loop, but not for the ones inside. All the variables appear fine, so i think is a syntax error.

Thanks!

<input type="checkbox" name="check0" value='1' <?php echo ((${executed_mod0}=="1")? "checked" : ''); ?> onchange='this.nextSibling.style.backgroundColor = this.checked ? "#6EDBFF" : "white";'><input type="text" name="procedure0" value="<?php echo $repair_mod0;?>">

<?php   
$i=1;
while($i<$nrpm)
{
echo '<br><input type="checkbox" name="check'.$i.'" value="1"'. ((${executed_mod.$i}=="1")? "checked":"").' onchange="this.nextSibling.style.backgroundColor = this.checked ? \"#6EDBFF\" : \"white\";"><input type="text" name="procedure'.$i.'" value="'.${repair_mod.$i}.'">';
$i++;
};
?>

Here's a jQuery solution http://jsfiddle.net/gabrieleromanato/dHZS9/ — Amit Singh, Nov 21 '15 at 14:00
Possible duplicate of [How to change the checked mark color of a checkbox in HTML?](http://stackoverflow.com/questions/27417398/how-to-change-the-checked-mark-color-of-a-checkbox-in-html) — Programmer, Nov 21 '15 at 14:06
@caramba It's javascipt and php. I had to tag also php, but my main problem here is with Javascipt... Thanks — chitoiu daniel, Nov 22 '15 at 08:04
@AmitSingh You have a +1 for jQuery but i solved it with Javascipt — chitoiu daniel, Nov 22 '15 at 08:05

score 2 · Accepted Answer · answered Nov 21 '15 at 14:25

2

Maybe this can get you in the right direction. I added one more .nextSibling when getting the textbox to set background color for.

HTML

<input type="checkbox" name="check0" value='1' onchange='setColor(this)' />
<input type="text" name="procedure0" value="1" />

<input type="checkbox" name="check1" value='2' onchange='setColor(this)' />
<input type="text" name="procedure1" value="2" />

<input type="checkbox" name="check2" value='3' onchange='setColor(this)' />
<input type="text" name="procedure2" value="3" />

JavaScript

function setColor(ele){
    ele.nextSibling.nextSibling.style.backgroundColor = ele.checked ? "#6EDBFF" : "white";   
}

answered Nov 21 '15 at 14:25

Arg0n

8,283
2
21
38

@ Arg0n Thanks! It's not working with nextSibling.nextSibling but it's working having the function out of php. I'm just scratching the surface in Javascipt and i didn't know you can't have javascipt inside php... Or you can? – chitoiu daniel Nov 22 '15 at 08:02
I'm not really familiar with PHP, but i suppose if the generated HTML/JS looks ok it should work. – Arg0n Nov 22 '15 at 08:37
@chioiu daniel Btw, you may want to test your code in Chrome, since i had to add one nextSibling to get it working. If it does not work, you might want to restructure your HTML and change the selector for the textbox. – Arg0n Nov 22 '15 at 08:46

Change color if checkbox is checked - onchange event

1 Answers1