ansaurus

Question

check whether checkbox is checked or not using jquery

Answer 1

+2 A:

You can do like this

$('#checkbox_id').click(function(){
  alert(this.checked);
});

Or using is() method:

$('#checkbox_id').click(function(){
  if ($(this).is(':checked')){
    alert('Checked');
  }
  else{
    alert('Not Checked');
  }
});

If you want to do this for all checkbox inside a form, you can use the :checkbox filter selector like this:

$('#form_id :checkbox').click(function(){
  alert(this.checked);
});

Make sure to wrap your code in ready handler:

$(function(){
  // code....
});

Sarfraz 2010-10-27 10:25:34

lakum4stackof 2010-10-27 10:32:23

Answer 2

+1 A:

Firstly, bind the event in script tags, rather than inline. This is much easier to follow and makes your HTML far more readable. ~~Then you can use the jQuery selector :checked to determine whether the checkbox is checked.~~ Then you can use the checked attribute of the element.

$(document).ready(function(){
    $('#Public(Web)').click(function(){
        if (this.checked) {
            // do your code here
        }
    });
});

lonesomeday 2010-10-27 10:28:45

Seriously, no. For checking whether a single checkbox is checked, `$(this).is(':checked')` is simply insane. `this.checked` is better in every conceivable sense.

Tim Down 2010-10-27 10:34:57

Yes. Forgive me, JS gods, for I have sinned...

lonesomeday 2010-10-27 10:36:36

Sarcasm, I assume? `$(this).is(':checked')` is a pet peeve of mine, as a symptom of what it represents. Do I need to elaborate?

Tim Down 2010-10-27 10:38:14

Not sarcasm in the slightest -- see my changes!

lonesomeday 2010-10-27 10:40:11

Ah, OK. I got into pet peeve tunnel vision attack mode. Sorry.

Tim Down 2010-10-27 10:43:58

No worries. My sense of humour is odd at times...

lonesomeday 2010-10-27 10:44:36

Answer 3

+2 A:

First, don't use javascript: in event handler attributes. It's wrong and only works because it happens to be valid JavaScript syntax. Second, your id is not valid. Parentheses are not allowed in the id attribute (in HTML 4 at least; HTML 5 lifts this restriction). Third, if you're using jQuery it probably makes sense to use its click() method to handle the click event, although be aware that changing it to do that will mean that if the user clicks on the checkbox before the document has loaded then your script won't handle it.

<input type="checkbox" id="Public_Web" checked value="anyone"
    name="data[anyone]">

$(document).ready(function() {
    $("#Public_Web").click(function() {
        if (this.checked) {
            alert("Checked!");
        }
    });
});

Tim Down 2010-10-27 10:33:30

Hey, this worked. Thanks for this good one. Thanks to all who answered for this.

lakum4stackof 2010-10-27 10:42:01

Answer 4

A:

Here is another example, notice instead of using a onClick event in the Element itself i would prefer to use a listener, but remove the brackets from the id, It will give you a hard time in some browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html><head>
<input type="checkbox" id="PublicWeb" checked="checked" value="anyone" name="data[anyone]" />
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'&gt;&lt;/script&gt;
<script>
$(document).ready(function(){
    $('#PublicWeb').click(function(){
        if($(this).is(':checked')){
            alert("its checked alright");
        }
    });
});
</script>
</head><body></body></html>

Hannes 2010-10-27 10:38:48

ansaurus

tags:

views:

answers:

check whether checkbox is checked or not using jquery

related questions