html jquery form checkbox

Question

HTML:

<td>
    <input type="checkbox" name="lit" value="literary"><span class="checkdata">&nbsp;Literary Event&nbsp;&nbsp;</span>
    <input type="checkbox" name="art" value="art"><span class="checkdata">&nbsp;Art Event&nbsp;&nbsp;</span>
    <input type="checkbox" name="cul" value="cultural"><span class="checkdata">&nbsp;Cultural Event&nbsp;&nbsp;</span>
</td>

Script:

<script>
    $(function(){
        if ("input:checked") {
            $(".checkdata").css("color", "#F0F0F0");
        }
    });
</script>

What I'm trying to do here is to check, if the user has checked the checkbox. If so, the span class="checkdata" should turn grey. It does not happen though.

why is he using <code>this.checked</code> instead of <code>$(this).checked</code> ? — anubhav gupta
– anubhav gupta, Commented Feb 1, 2013 at 8:18
@anubhavgupta, in his post he links to a pretty great writeup. Bottom line is, there's no real need to encapsulate "this" into a jquery object, as it only creates overhead (=slower) and isn't needed at all. — Kippie
– Kippie, Commented Feb 1, 2013 at 8:32

Rohan Kumar · Accepted Answer · 2013-02-01 08:19:45Z

1

Try This

$(function(){
    $('input[type="checkbox"]').each(function(){
        $(this).click(function(){
        if ($(this).prop('checked'))
        {
            $(this).next(".checkdata").css("color", "#F0F0F0");
        }
        else
            $(this).next(".checkdata").css("color", "#000000");

        });
    });
});

Test fiddle: http://jsfiddle.net/GQ4FY/1/

answered Feb 1, 2013 at 8:19

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anubhav gupta Over a year ago

could you tell me why the in the link in the abve comment, the person has used this.checked instead of $(this).checked ?

Rohan Kumar Over a year ago

You can replace the line $('input[type="checkbox"]').each(function(){ to $('input[type="checkbox"]').click(function() This is the fiddle for it: jsfiddle.net/GQ4FY/2

Rohan Kumar Over a year ago

@anubhavgupta Why not Anubhav In short this is the DOM object, whereas $(this) is the jQuery wrapper around same. but for more info you can read from here forum.jquery.com/topic/… and stackoverflow.com/questions/3633270/…

Catalin · Accepted Answer · 2013-02-01 08:23:46Z

0

If you want to toggle the css when the checkbox value is changed, try this:

$(function () {
    $("input[type='checkbox']").change(function () {
        var isChecked = $(this).is(":checked");
        if (isChecked) {
            $(".checkdata").css("color", "#F0F0F0");

        } else {
            $(".checkdata").css("color", "#000000");
        }
    });
});

answered Feb 1, 2013 at 8:23

Catalin

11.8k19 gold badges81 silver badges152 bronze badges

Comments

Jamir Khan · Accepted Answer · 2013-02-01 08:28:18Z

0

try this:

$(function(){

    if($("input").is(':checked')){
        $(".checkdata").css("color", "#F0F0F0");
    }

});

edited Feb 1, 2013 at 8:28

answered Feb 1, 2013 at 8:21

Jamir Khan

3971 silver badge13 bronze badges

1 Comment

asprin Over a year ago

This will apply the css to all spans irrespective of whether they are checked or not

Philll_t · Accepted Answer · 2013-02-01 08:35:50Z

0

 $("input[type='checkbox']").change(function (){
var perform = {
   true : {'color' : 'green'},
   false: {'color' : 'red'}
 }, chk = $(this);

 $(".checkdata").css(perform[chk.is(":checked")]);

});

Prevent if statements :) Polymorphism.

answered Feb 1, 2013 at 8:35

Philll_t

4,4377 gold badges48 silver badges61 bronze badges

1 Comment

Philll_t Over a year ago

That book changed my life.

Panos Bariamis · Accepted Answer · 2013-02-01 08:42:05Z

0

write your script as

$(function() {
    $('input[type="checkbox"]').click(function() {
        $(this).next('.checkdata').css('color', this.checked ? '#F0F0F0' : '#000000');
    });
});

answered Feb 1, 2013 at 8:42

Panos Bariamis

4,6717 gold badges41 silver badges63 bronze badges

Collectives™ on Stack Overflow

html jquery form checkbox

5 Answers 5

3 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related