onclick check box back ground colour change of parent div

Question

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;}

https://jsfiddle.net/wptq9sfk/ – About Leros Jan 15 '16 at 08:25 — About Leros, Jan 15 '16 at 08:25

score 1 · Accepted Answer · answered Jan 15 '16 at 08:35

1

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");
  });
});

answered Jan 15 '16 at 08:35

Sharath Bangera

139
1
8

I'll post a new question regarding this, but thought I would ask. How can I makes it so that the highlighting is saved even if the page is refreshed and if the page is sent as a link? – About Leros Jan 15 '16 at 11:25
for that you need maintain a state of that checkbox, if the checkbox is ticked keep the highlight on or else don't keep. you can keep the state using localStorage or sessionStorage. have a look on it once. – Sharath Bangera Jan 15 '16 at 11:53
Thanks so much, will have a look at a few turorials http://stackoverflow.com/questions/34812590/how-to-create-local-storage – About Leros Jan 15 '16 at 13:52

B1nd0 · Answer 2 · 2016-01-15T08:41:57.457

0

<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.

edited Jan 15 '16 at 08:41

answered Jan 15 '16 at 08:22

B1nd0

110
1
8

What do you mean change up? – About Leros Jan 15 '16 at 08:29
Like should look like this, first close the tag you opened the last, the closing tags should be in reverse order than the opening tags – B1nd0 Jan 15 '16 at 08:31
should be at the end, not – Dandy Jan 15 '16 at 08:32

score 0 · Answer 3 · answered Jan 15 '16 at 08:25

0

I think you should place your javascript inside

$(document).ready(function () {

});

Because it is needed for Jquery

answered Jan 15 '16 at 08:25

Sanjar Mirakhmedov

11
5

onclick check box back ground colour change of parent div

3 Answers3