Javascript: onClick checkbox change div color

Question

I've a check-box inside div.

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1)">Sample question text
</div>

I'm trying to toggle the background color of div whenever checkbox is checked or unchecked, which is not working.

Here is the complete code

However, implementing same code without toggle logic is working fine - link

Kindly suggest what could be going wrong.

Answer 1

The problem is that x.style.backgroundColor will return color's value only if it is set as inline style. And it will return rgb, not hex. You should better make the verification based on checked attribute of the checkbox:

<div id="question_text_1">
    <input type="checkbox" onChange="myFunction(question_text_1, this)">Sample question text
</div>

function myFunction(x, _this) {
    x.style.backgroundColor = _this.checked ? '#0000FF' : '#FF0000';
}

http://codepen.io/anon/pen/avLrze

Answer 2

The code doesn't work because x.style.backgroundColor always returns '' - empty string and else block is executed.

To get the values see How to get an HTML element's style values in javascript?

---

You can achieve this using CSS, no need of using Javascript

1. Wrap the text associated with the checkbox in label element
2. Use :checked property of the checkbox to apply styles when the checkbox is checked
3. Use adjacent sibling selector( + ), on checked checkbox to set styles on the label

 :checked + label { color: green; font-weight: bold; } 

 <div id="question_text_1"> <input type="checkbox" id="check1"> <label for="check1">Sample question text</label> </div> 

---

If you want to use Javascript, use classList

1. Create a class with desired styles to be applied when checked
2. Use !important to override styles in the class as the id selector have higher specificity
3. Use classList.toggle to toggle class

Updated Pen

 function myFunction(x) { x.classList.toggle('blue'); } 

 #question_text_1 { background-color: #FF0000; padding: 7px; margin: 7px; } .blue { background-color: #00f !important; } 

 <div id="question_text_1"> <input type="checkbox" onChange="myFunction(question_text_1)">Sample question text </div> 

Answer 3

please change you code like below,It works fine

<div id="question_text_1">
  <input type="checkbox" onChange="myFunction(question_text_1,this)">Sample question text
</div>

 function myFunction(x,y) {
  if (y.checked)
      x.style.backgroundColor = '#0000FF';
  else
      x.style.backgroundColor = '#FF0000';
}

You can not directly compare div background color with value of color because for it you must have to declare variable of color related to different browser for that visit this link How to compare a backgroundColor in Javascript?

Answer 4

Instead of x.style.backgroundColor in if condition use window.getComputedStyle(x).backgroundColor and compare with 'rgb' equivalent of colors.

function myFunction(x) {
 if (window.getComputedStyle(x).backgroundColor == "rgb(255, 0, 0)") {
    x.style.backgroundColor = '#0000FF';
 } else if (window.getComputedStyle(x).backgroundColor == "rgb(0, 0, 255)"){
    x.style.backgroundColor = '#FF0000';
 }
}

Hope this helps.

Thanks

Answer 5

You can try it with jQuery like this:

HTML

<input type="checkbox" id="my_checkbox"/>
<div id="toggle_color">Color Will change here</div>

jQuery

jQuery(document).ready(function($){
    $('#my_checkbox').on('change', function(){
        if($(this).is(':checked')){
           $("#toggle_color").css('background-color',"red");
        } else {
            $("#toggle_color").css('background-color',"#fff");
        }
    })
})

Checkout the jsfiddle .