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.

score 5 · Accepted Answer · edited Oct 16 '15 at 06:31

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

score 2 · Answer 2 · edited May 23 '17 at 12:24

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

Wrap the text associated with the checkbox in label element
Use :checked property of the checkbox to apply styles when the checkbox is checked
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

Create a class with desired styles to be applied when checked
Use !important to override styles in the class as the id selector have higher specificity
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>

score 1 · Answer 3 · edited May 23 '17 at 12:01

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?

score 0 · Answer 4 · answered Oct 16 '15 at 05:16

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.

score 0 · Answer 5 · answered Oct 16 '15 at 05:36

0

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

answered Oct 16 '15 at 05:36

Anshul

687
9
18

Dont you think it will be an expensive operation ? – Rayon Oct 16 '15 at 05:41
This may be slow but works in most of the cases for pure javascript. If you can use jQuery - go with .css property. Check this link for performance https://jsperf.com/getcomputedstyle-vs-style-vs-css/2 – Anshul Oct 16 '15 at 06:12
How about `this.checked` ? – Rayon Oct 16 '15 at 06:17
Yes that will work. We need to have conditional function to change background color when checked. But question was about what could be used in place of style.backgroundColor so I gave an option of window.getComputedStyle. – Anshul Oct 16 '15 at 06:28

Javascript: onClick checkbox change div color

5 Answers5

Linked