How do I check if a checkbox is checked with JQuery?

Question

I am trying to allow a click function if the user has checked a checkbox on the page. Otherwise, I want to add a class to the #additional_foreign button.

I think I am close, but it doesn't seem to be working. Here is my code:

if($('#foreign_checkbox').attr('checked')) { $('#additional_foreign').click(function() { alert('This click function works'); }); } else { $('#additional_foreign').addClass('btn_disable'); }

When I check the checkbox, it doesn't allow the click function and when I uncheck the checkbox, it also doesn't add the class as it should.

What am I doing wrong?

EDIT:Here is my HTML for clarification.

<input id="foreign_checkbox" type="checkbox" /> <span id="additional_foreign">Click Me</span>

Your primary question aside, what your code does is to attach a click event handler to a button when the checkbox is checked, if not it is styled as 'disabled' but not actually disabled. Unchecking the checkbox again will not remove the button's onclick handler. — o.k.w
– o.k.w, Commented Feb 5, 2010 at 3:48
o.k.w. - Oh, I see. How would I make a button unclickable in the else area of the conditional statement? — zeckdude
– zeckdude, Commented Feb 5, 2010 at 3:51
See JQuery's unbind(). Not removing the action is probably OK, since adding the btn_disable class presumably disables the button. On the other hand, you will need to remove the class in your when-it's-checked case — user24359
– user24359, Commented Feb 5, 2010 at 3:56

Marek Karbarz · Accepted Answer · 2010-02-05 04:11:00Z

9

try using $('#foreign_checkbox').is(":checked") - rest of the code looks fine

If this was my code I'd do something like this to make it work:

<input id="foreign_checkbox" type="checkbox" /> <span style='display:none' id="additional_foreign">Click Me</span> <script type="text/javascript"> $(document).ready(function() { $("#foreign_checkbox").click(function() { if($('#foreign_checkbox').is(':checked')) { $('#additional_foreign').show(); } else { $('#additional_foreign').hide(); } }); $('#additional_foreign').click(function() { alert('This click function works'); }); }); </script>

edited Feb 5, 2010 at 4:11

answered Feb 5, 2010 at 3:33

Marek Karbarz

29.4k6 gold badges55 silver badges73 bronze badges

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

7 Comments

zeckdude Over a year ago

When I do that, the else part of the conditional statement works, but the click function still does not work when I check the checkbox

Brock Batsell Over a year ago

You also added your inner doSomething() function to the onclick handler of #additional_foreign, which I doubt you meant to do.

Marek Karbarz Over a year ago

you mean nothing happens when you check the additional_foreign checkbox? First I would move the click event binding outside of the if statement - you don't wan to bind it every time foreign_checkbox is checked - you'll end up with multiple events firing. Then inside the if statement I would simply hide/show the other checkbox. Would you care to post some of your HTML?

zeckdude Over a year ago

Brock - No I want to make the #additional_foreign button clickable after the checkbox is clicked. If the user then clicks on the button, it should run the doSomething() function.

zeckdude Over a year ago

Works great! I think I was overthinking it too much. Your solutions seems much easier and more user-friendly. Thanks!

|

user24359 · Accepted Answer · 2010-02-05 03:50:27Z

The problem is that the code doesn't run continually, only when the page loads, when all the boxes are unchecked. You need an action that fires when the box is checked or unchecked, which adds an action or a class to the button:

$('#foreign_checkbox').change(function(){ if (this.checked){ $('#additional_foreign').click(function() { doSomething(); }); } else { $('#additional_foreign').addClass('btn_disable'); } });

Wow I struggled until I found your The problem is that the code doesn't run continually. .change works a lot better for me.

Collectives™ on Stack Overflow

How do I check if a checkbox is checked with JQuery?

2 Answers 2

7 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Linked

Related