CODEWITHSUNDEEP
jquerycheckbox
Alek
Alek

Reputation: 1

Is it possible to change background of a div when checkbox is checked with jquery

Is it possible to change red background of a div when checkbox is checked with jquery. Example fiddle

<div class="col-md-4 wizardBox">
<label for="img1">
    <img src="http://beststore.bugs3.com/img/sample/portfolio-macbook.fw.png" />
    <p>Culture</p>
    <input type="checkbox" class="img1" id="img1" name="img1" value="" />
</label>
</div>

Upvotes: 0

Views: 49

Answers (4)

Devendra Soni
Devendra Soni

Reputation: 1934

Hi it is good practice to cache the control in variable

//here we getting the control(div) in the variable 
var $div=$('.wizardBox');
$('#img1').change(function() {
    if($(this).is(":checked")) 
       $div.css('background-color','red');
    else
       $div.css('background-color','');
});

i have updated the JSFiddle for you click here to see

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Try 

$('#img1').click(function() {
    if($(this).is(":checked")) 
       $(this).closest(".wizardBox").css('background-color','red');
});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use:

$('#img1').change(function() {
    if($(this).is(":checked")) 
       $('.wizardBox').css('background-color','red');
    else
       $('.wizardBox').css('background-color','');
});

Working Demo

Upvotes: 1

blockhead
blockhead

Reputation: 9705

Yes...just listen to a change event on the checkbox, and change the background.

Upvotes: 0

Related Questions