div check box to be dimmed on click

Question

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

jmore009 · Answer 1 · 2014-02-28T02:19:37.177

1

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

edited Feb 28 '14 at 02:19

answered Feb 28 '14 at 02:13

jmore009

12,863
1
19
34

Thank you for your answer. I had to preposition the label so the whole div is clickable but it works great except I would like to have the grey get put onto of the div and not having the div change color as the div it self with have 2 others divs in it that both have different colors. Changing the div background color will not have an effect I think as it will be hidden behind the other 2 divs that are placed within that one – Luke Feb 28 '14 at 02:20
I'm not quite sure I understand but you should be able to accomplish that with the code I provided. Just add CSS transitions to the div you do want to target and update which div you target on click – jmore009 Feb 28 '14 at 02:22
that is ok. I believe @tomanow has just answered it perfectly. – Luke Feb 28 '14 at 02:22
@Luke understand if you animate the opacity of that container, anything inside will have the same opacity applied to it (note that in tomanow 's answer the checkbox fades out too). If that is what you are going for then fine, but otherwise you need to use `rgba` and css transitions – jmore009 Feb 28 '14 at 02:23

score 1 · Answer 2 · answered Feb 28 '14 at 02:13

1

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.

answered Feb 28 '14 at 02:13

JCOC611

19,111
14
69
90

is there a way to put the grey over the top of the div as the div it self will have 2 divs within it what both are different colors so changing the div color wouldn't have a visual effect – Luke Feb 28 '14 at 02:18
@Luke: definitely. Just a question, does the main div have a definite width and height, or do they change, because the implementation would be slightly different. – JCOC611 Feb 28 '14 at 02:33
Thank you JCO for your time. Tomanow has answered it perfectly but your method is also good except I am unable to use that method with the code I am using as I have multiply divs within the div that will be dulled out. If you click Tomanow's jsfiddle you will see what I was looking for. Thank you once again – Luke Feb 28 '14 at 02:38
@Luke: I am glad you got the answer you were looking for! – JCOC611 Feb 28 '14 at 02:43
I am not sure if you are about but I was wondering if you would be able to help me some more with this problem. I do not really want to make another question but I will do if I need to. the div is duplicated because of an array i call for different information and with 2 divs with the same id the 1st div is the only one that gets clicked when I need it to elim the div that is clicked on. I think you might get what i mean by this http://jsfiddle.net/6as7b/ – Luke Feb 28 '14 at 03:50

score 1 · Accepted Answer · answered Feb 28 '14 at 02:17

1

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

answered Feb 28 '14 at 02:17

Tomanow

7,247
3
24
52

I believe this is the perfect answer. I will just double check it within my actual files but it looks very promising. thank you – Luke Feb 28 '14 at 02:22

score 0 · Answer 4 · answered Feb 28 '14 at 02:25

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

div check box to be dimmed on click

4 Answers4