CODEWITHSUNDEEP
javascriptjquerycheckbox
About Leros
About Leros

Reputation: 190

onclick check box back ground colour change of parent div

I have made an information card and in the top right hand corner there is a check box, within the info card div. The objective is when the check box is checked the background colour of the info card div changes with a fade. Can't seem to get it to work. any help would be appreciated. Code here https://jsfiddle.net/wptq9sfk/:

HTML:

<div class="pin" id="pin"> 
<div class="pull-right intrest-box">
<input type="checkbox" class="faChkRnd" id="like" ><label></label> 
</div>    
<p class="pull-left">13.01.16  </p> <!-- date -->     
<h2>Title </h2> <!-- title-->   
<p> </p>
<div class="text-center">    
<p class="card-title"><a href="" class="">Like</p></a>        
</div>
</div>

<script>
$(document).ready(function () {
$("#like").click(function () {
$("#pin").toggleClass("pincard-checked");
});    
});
</script>

CSS

.pincard-checked{background-color: #000000; color: #ffffff;}

Upvotes: 1

Views: 679

Answers (3)

B1nd0
B1nd0

Reputation: 110

<p class="card-title"><a href="" class="">Like</p></a>

Didnt you change up the p and a closing tag?

Edit:

Also, I think it would be better to use "onchange" function on the checkbox, instead of "onclick"

Something like:

<input type="checkbox" onchange="togglingCheckbox(this)" .....>

This way you can detect if the checkbox state is changed with keyboard, not only with mouse.

Upvotes: 0

Sharath Bangera
Sharath Bangera

Reputation: 139

You are missing the document.ready function, also you have missed your own pin-checked css in the JSfiddle that you posted. i have updated your code and run in codePen. Please find the link below. Code is working fine.

http://codepen.io/johnsonshara/pen/obGjGN

$(document).ready(function(){
  $("#like").click(function () {
    $("#pin").toggleClass("pincard-checked");
  });
});

Upvotes: 1

Sanjar Mirakhmedov
Sanjar Mirakhmedov

Reputation: 11

I think you should place your javascript inside 

$(document).ready(function () {

});

Because it is needed for Jquery

Upvotes: 0

Related Questions