I'm trying to use Javascript to detect whether a checkbox has been checked. My plan is to allow the user to select the checkbox in order to mark a letter as printed and then use Ajax to update the database.

Here is the code I'm using.

<label for="printed">Printed</label>
<input type="checkbox" name="8200" id="8200" value="P" onclick="checked(this.id);" />
<script type="text/javascript">
  function checked(id) {
    var remember = document.getElementById(id);
    if (remember.checked){
      alert("checked");
    }else{
      alert("You didn't check it!");
    }
  }
</script>

All I get in return is an error saying Uncaught TypeError: boolean is not a function from Google Chrome and checked is not a function from Firefox.

I'm trying to use Javascript to detect whether a checkbox has been checked. My plan is to allow the user to select the checkbox in order to mark a letter as printed and then use Ajax to update the database.

Here is the code I'm using.

<label for="printed">Printed</label>
<input type="checkbox" name="8200" id="8200" value="P" onclick="checked(this.id);" />
<script type="text/javascript">
  function checked(id) {
    var remember = document.getElementById(id);
    if (remember.checked){
      alert("checked");
    }else{
      alert("You didn't check it!");
    }
  }
</script>

All I get in return is an error saying Uncaught TypeError: boolean is not a function from Google Chrome and checked is not a function from Firefox.

• javascript
• ajax
• checkbox

• is a JQuery solution ok? – Pastor Bones Commented Nov 14, 2012 at 10:45
• There is something missing in your code. – gdoron Commented Nov 14, 2012 at 10:46
• yeah I'm happy to use jQuery although not had any luck with it so far... – jampez77 Commented Nov 14, 2012 at 10:46
• You want to know if the element has been clicked at all (and potentially reset to its default state), or whether the element's state has been changed from its default? – David Thomas Commented Nov 14, 2012 at 10:47

6 Answers 6

You should use a different name to your javascript method, as the boolean checked field of the input just hides the one you've defined...

You need to change the name of the javascript method.

HTML:

<label for="printed">Printed</label>
<input type="checkbox" name="8200" id="8200" value="P" onclick="isChecked(this.id);" />

JS:

   function isChecked(id) {
        var remember = document.getElementById(id);
        if (remember.checked){
            alert("checked");
        }else{
            alert("You didn't check it!");
        }
    }

Look at this JSFiddle: http://jsfiddle/6dx6A/39/

Just simply change your function name you are using as "checked(this.id)". I've tried checked1(this.id). It worked

You can change the function name to get the answer as follows. It worked for me

function IsChecked(id)
{
    var remember = document.getElementById(id);
    if (remember.checked){
       alert("checked");
    }else{
       alert("You didn't check it!");
    }
}

Since you got a different jQuery solution I'm not happy with, I'll give you my jQuery solution:

<input type="checkbox" name="8200" id="theid" value="P" />

// 8200 isn't a valid id in HTML4, it can't start with a number
$('#theid').change(function(){
    if (this.checked)
        alert('checked');
    else
        alert('unchecked');
});

Here is what you have in a JQuery solution and will work for every checkbox on the page (add a class to the selector to be able to apply this to only certain checkboxes)

$(function(){
  var remember;
  $('input:checkbox').click(function(){
    remember = $(this).attr('id');

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

    } else {
      // Checkbox is NOT checked

    }

  });
});