Change style if checkbox checked

Question

How can I do that ? This is not working, no results, no effect, no error output.

$('input[type=checkbox]').each(function() 
    {
            if($(this).attr("checked") === true){
            $('.hoverbox .a').css('text-transform', 'uppercase');
            }
            else
            {
            $('.hoverbox .a').css('text-transform', 'lowercase');
            }
    });

You need to clarify exactly what you're trying to accomplish. — Blazemonger, Feb 25 '13 at 16:35
Do NOT completely change your original question on an edit. Submit a new question if you have a new problem. — Blazemonger, Feb 25 '13 at 16:46
It is not the same problem. Your original source code didn't have an `.on('change', ...)` in it. Worse, you've added the completely useless statement "it won't work" without explaining what "it" is or what "working" looks like. — Blazemonger, Feb 25 '13 at 16:47
I can't uderstand why it is so hard to figure it out what I pretend to achieve. If checked checkbox then uppercase that div class else lower case it. — noneJavaScript, Feb 25 '13 at 16:51
It's hard to figure it out because you never explained it in the question. Thank you for finally clarifying; I've updated my answer. — Blazemonger, Feb 25 '13 at 16:58

Blazemonger · Accepted Answer · 2013-02-25T16:57:47.543

5

You probably need an event handler:

$('input[type=checkbox]').on('change',function(e) {
   // do stuff
});

http://api.jquery.com/on

Or possibly (it's hard for me to understand your intentions) you need to use .prop() instead of .attr():

if ($(this).prop('checked')) {
    // do something 
} else {
    // do something else
}

update: Putting it all together:

$('input[type=checkbox]').on('change',function(e) {
    if ($(this).prop('checked')) {
        $('.hoverbox .a').css('text-transform', 'uppercase');
    } else {
        $('.hoverbox .a').css('text-transform', 'lowercase');
    };
});

Although adding a custom class and toggling it would save you a little trouble:

$('input[type=checkbox]').on('change',function(e) {
    $('.hoverbox .a').toggleClass('uppercase');
});

CSS:

.hoverbox .a {
    text-transform: lowercase;
}
.hoverbox .a.uppercase {
    text-transform: uppercase;
}

edited Feb 25 '13 at 16:57

answered Feb 25 '13 at 16:33

Blazemonger

90,923
26
142
180

I *think* his question is more about changing the style, not handling the event. – BenM Feb 25 '13 at 16:34
@BenM Nope, still not unambiguous. – Blazemonger Feb 25 '13 at 16:37
I agree. Hence why my initial comment said that I **think**! – BenM Feb 25 '13 at 16:37
@Blazemonger I had my question here http://stackoverflow.com/questions/23562875/script-not-working-properly-after-partial-postback. can you please help me to solve it.... – Vignesh Kumar A May 10 '14 at 04:53

score 2 · Answer 2 · answered Feb 25 '13 at 16:35

2

Why cant you use CSS? Why waste javascript?

input[type=checkbox]:checked + div {
    text-decoration:underline;
}

answered Feb 25 '13 at 16:35

PlantTheIdea

16,061
5
35
40

Change style if checkbox checked

2 Answers2