CODEWITHSUNDEEP
javascripthtmlcheckboxonclick
curious
curious

Reputation: 121

Javascript: onClick checkbox change div color

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.

Upvotes: 1

Views: 12949

Answers (5)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12882

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

Upvotes: 5

Rita Chavda
Rita Chavda

Reputation: 191

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?

Upvotes: 1

Anshul
Anshul

Reputation: 697

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

Upvotes: 0

Tushar
Tushar

Reputation: 87203

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>

Upvotes: 2

Touqeer Shafi
Touqeer Shafi

Reputation: 5264

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.

Upvotes: 0

Related Questions