div check box to be dimmed on click

I found this code on another post on this website what makes it so you can click anywhere in the div and it ticks the check box for you.

Below is the code that I found however I have changed it by giving it an id

<label for="cb">
     <div id="clickablediv">
         <input name="cb" id="cb" type="checkbox">
     </div>
</label>

Link to original question.

I would like to extend this question/answer by adding some java script to it so when the div is clicked it fades out the div a little bit so you can tell it has been clicked and if it is clicked again then it goes to its original looks. I am thinking maybe a grey color added with a transparency so you can still see the div underneath once it has been clicked.

Here is a jsFiddle link with the HTML and some CSS to give the div some content what will be dulled out on click.

I am using jquery 1.11.0 on my site at the moment so if jquery is used could you please make sure it works with 1.11.0

Answers


Here is the opacity fade with animation: FIDDLE

$('#clickablediv').click(function () {
    if ($(this).find('#cb').is(':checked')) {
        $(this).animate({
            opacity: 0.5
        }, 250);
    } else {
        $(this).animate({
            opacity: 1
        }, 250);
    }
});

You could use a simple .click event handler checking for the state of the checkbox:

$("#clickablediv").click(function(){
    if($(this).children("#cb")[0].checked){
        $(this).css({backgroundColor:"#389BE8"})   
    }else{        
        $(this).css({backgroundColor:"#0b61a4"}) 
    }
});

jsFiddle illustrating answer.

Definitely consider using CSS3 transitions, as jmore009 suggested, in order to animate the color change.


You can use some CSS3 transitions to fade the color and jquery's .is(":checked") to accomplish this EDIT: didn't see the part about clicking the div, updated fiddle and code

$("#clickablediv").click(function(){
 if($("#cb").is(":checked")){
   $("#clickablediv").css({"background":"rgba(0,0,0,.4)"});
 }else{
   $("#clickablediv").css({"background":"#0b61a4"});
 }
});

JSFIDDLE


you can set opacity of yur checkbox to 1, then use .animate() to animate it to fade out like this:

$('#cb').animate({opacity:0.3}, 500);

Then set a variable to keep the state of the checkbox clicked or not. JsFiddle: http://jsfiddle.net/4xByj/5/ It is compatible with jquery 1.11.0


Need Your Help

Where can I find a good template for a software application user guide?

coding-style user-guide

Looking for links to resources that will help me write a user guide for a software application. I'm after something that will help me to structure my guide, give it an appropriate writing style, and

How do I determine if an array is initialized in VB6?

arrays vb6

Passing an undimensioned array to the VB6's Ubound function will cause an error, so I want to check if it has been dimensioned yet before attempting to check its upper bound. How do I do this?