9

I want to check whether checkbox is checked or not using jquery. I want to check it on checkbox's onclick event.

<input type="checkbox" onclick="javascript:check_action();" id="Public(Web)" checked="checked" value="anyone" name="data[anyone]">

Is it possible? How?

Thanks.

3
  • 1
    Don't use javascript: in event handler attributes. It's wrong and only works because it happens to be valid JavaScript syntax. Commented Oct 27, 2010 at 10:26
  • id="Public(Web)" is not a valid id name. ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). Commented Oct 27, 2010 at 10:27
  • 1
    @FutureKode: In HTML 4, yes. In HTML 5, no. But for the foreseeable future you're absolutely right Commented Oct 27, 2010 at 10:39

9 Answers 9

12

You can also use this

if($("#checkbox_id").is(':checked'))
Sign up to request clarification or add additional context in comments.

Comments

11

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

1 Comment

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

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

1 Comment

<script type="text/javascript"> $('#Public(Web)').click(function(){ if ($(this).is(':checked')){ alert('Checked'); } else { alert('Not Checked'); } }); </script> I tried this. but it didn't worked.
3

There are Several options are there like....

1. if($("#ans").is('checked')) 
 2. if($("#ans:checked"))
 3. if($('input:checkbox:checked')) 

Comments

2

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

4 Comments

Seriously, no. For checking whether a single checkbox is checked, $(this).is(':checked') is simply insane. this.checked is better in every conceivable sense.
Sarcasm, I assume? $(this).is(':checked') is a pet peeve of mine, as a symptom of what it represents. Do I need to elaborate?
Not sarcasm in the slightest -- see my changes!
Ah, OK. I got into pet peeve tunnel vision attack mode. Sorry.
1

Try This:

if(!$('#elementid').is(':checked')){
    alert('Not checked');
}else{
    alert('checked');
}

Comments

1

You can do this using is() method:

$('##Public_Web').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:

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

Make sure to wrap your code in document ready handler:

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

Comments

0

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">
<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'></script>
<script>
$(document).ready(function(){
    $('#PublicWeb').click(function(){
        if($(this).is(':checked')){
            alert("its checked alright");
        }
    });
});
</script>
</head><body></body></html>

Comments

0

html

 <input type="checkbox" id="chkBox" checked/> Change Check Box

jquery

$("#chkBox").change(function() {
     if (this.checked) {
         alert("Checked");
         }
         else {
             alert("Not Checked")
             }
           });

 $("#chkBox").change(function() {
 if (this.checked) {
     alert("Checked");
     }
     else {
         alert("Not Checked")
         }
       });
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkBox" checked/> Change Check Box

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.