Show hide div through checkbox in JQuery

Question

JQuery:

$('#chkCaption').live("click", function() {
    if ($('#chkCaption').attr("checked")) {
        $('#divCaption').show();
    }
    else {
        $('#divCaption').hide();
    }
});

But it is not work.Help to find my mistake or suggest the way.Thanks.

I suggest this read: http://stackoverflow.com/questions/5874652/prop-vs-attr — Doug Owings, Nov 08 '11 at 07:58
show your HTML (best in a jsfiddle), that would at least help... but you should tell us what's wrong! — JMax, Nov 08 '11 at 07:58

score 5 · Answer 1 · answered Nov 08 '11 at 07:58

5

Instead of

$('#chkCaption').attr('checked')

you may want to try this:

$(this).is(':checked')

answered Nov 08 '11 at 07:58

Richard Neil Ilagan

14,387
5
46
65

score 3 · Accepted Answer · answered Nov 08 '11 at 07:57

3

try this:

$('#chkCaption').live("click", function() {
    if (this.checked) {
        $('#divCaption').show();
    }
    else {
        $('#divCaption').hide();
    }
});

this should be in document.ready.

Instead of Jquery attr or is you can use javascript property checked

answered Nov 08 '11 at 07:57

Kamil Lach

4,359
2
18
20

Its seems browser prob but its work D:) its perfect what i want.Thanks. – 4b0 Nov 08 '11 at 08:10
+1 using `this.checked` instead of `.is(':checked')`, -1 for using obsolete `.live()` – HenningCash Mar 03 '13 at 01:18

Braiam · Answer 3 · 2013-03-03T01:11:20.510

In jQuery 1.9 .live() was removed. So the actual answers changed, if using javascript .checked:

$('#chkCaption').on("click", function() {
  if (this.checked) {
    $('#divCaption').show("table-row");
  }
  else {
    $('#divCaption').hide();
  }
});

In pure jQuery:

$('#chkCaption').on("click", function() {
  if ($(this).is(":checked")) {
    $('#divCaption').show();
  }
  else {
    $('#divCaption').hide();
  }
});

score 1 · Answer 4 · answered Nov 08 '11 at 07:58

1

You just forgot the function declaration parens on show()

$('#chkCaption').live("click", function() {
    if ($('#chkCaption').attr("checked")) {
        $('#divCaption').show();
    }
    else {
        $('#divCaption').hide();
    }
});

answered Nov 08 '11 at 07:58

Rylab

1,166
6
15

score 0 · Answer 5 · answered Nov 08 '11 at 07:58

0

$('#chkCaption').click(function () {

        if ($(this).is(':checked')) {

            //Show div
        } else {
            //Hide div
        }
});

That should do it ;)

answered Nov 08 '11 at 07:58

Teun Pronk

1,357
12
23

score 0 · Answer 6 · answered Nov 08 '11 at 08:00

0

you are missing (), TRY

$('#chkCaption').live("click", function() {
    if ($('#chkCaption').prop("checked")) {
        $('#divCaption').show();
    }
    else {
        $('#divCaption').hide();
    }
});

DEMO

answered Nov 08 '11 at 08:00

diEcho

52,196
40
166
239

score -2 · Answer 7 · answered Nov 08 '11 at 07:59

-2

$('#chkCaption').live("click", function() {
    if ($('#chkCaption').is(":checked")) {
        $('#divCaption').show();
    }
    else {
        $('#divCaption').hide();
    }
});

answered Nov 08 '11 at 07:59

Mr.T.K

2,268
6
25
41

Show hide div through checkbox in JQuery

7 Answers7