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.

[if checkbox is checked, do this](http://stackoverflow.com/questions/4243554/if-checkbox-is-checked-do-this). — Vucko, Feb 01 '13 at 08:16
why is he using this.checked instead of $(this).checked ? — anubhav gupta, Feb 01 '13 at 08: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, Feb 01 '13 at 08:32

score 1 · Accepted Answer · answered Feb 01 '13 at 08:19

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 01 '13 at 08:19

Rohan Kumar

40,431
11
76
106

could you tell me why the in the link in the abve comment, the person has used this.checked instead of $(this).checked ? – anubhav gupta Feb 01 '13 at 08:25
You can replace the line `$('input[type="checkbox"]').each(function(){` to `$('input[type="checkbox"]').click(function()` This is the fiddle for it: http://jsfiddle.net/GQ4FY/2/ – Rohan Kumar Feb 01 '13 at 08:38
@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 http://forum.jquery.com/topic/difference-between-this-and-this-and-when-i-should-use-which and http://stackoverflow.com/questions/3633270/difference-between-this-and-this-in-jquery – Rohan Kumar Feb 01 '13 at 08:45

Jamir Khan · Answer 2 · 2013-02-01T08:28:18.587

0

try this:

$(function(){

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

});

edited Feb 01 '13 at 08:28

answered Feb 01 '13 at 08:21

Jamir Khan

397
1
13

This will apply the css to all spans irrespective of whether they are checked or not – asprin Feb 01 '13 at 08:24

score 0 · Answer 3 · answered Feb 01 '13 at 08:23

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

score 0 · Answer 4 · answered Feb 01 '13 at 08:35

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 01 '13 at 08:35

Philll_t

4,267
5
45
59

That book changed my life. – Philll_t Feb 01 '13 at 08:36

score 0 · Answer 5 · answered Feb 01 '13 at 08:42

0

write your script as

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

answered Feb 01 '13 at 08:42

pbaris

4,525
5
37
61

html jquery form checkbox

5 Answers5