CODEWITHSUNDEEP
javascripthtmlcheckbox
shekoufeh
shekoufeh

Reputation: 639

Perform an action on checkbox checked or unchecked event on html form

I have a checkbox on a form which is unchecked by default as usual. Now I want to perform two separated actions on the checked and unchecked state of this checkbox.

This is my checkbox:

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this.id)"/>
</form>

And this is my script:

function doalert(id){
  if(this.checked) {
     alert('checked');
  }else{
     alert('unchecked');
  }
}

It just alerts unchecked! What is the best way to do this?

Upvotes: 48

Views: 239127

Answers (8)

Umar Solanki
Umar Solanki

Reputation: 11

<script>
function copyAddr()
    {
        if(document.getElementById("addcopy").checked) 
        
        document.getElementById("permadd").value=document.getElementById("commadd").value;
        else
        document.getElementById("permadd").value="";
        
    }
</script>

<input type="checkbox" name="" id="addcopy" onclick="copyAddr()">Communication address and Permanent address are same

Upvotes: 1

john c. j.
john c. j.

Reputation: 1175

The currently accepted answer doesn't always work.

(To read about the problem and circumstances, read this: Defined function is "Not defined".)

So, you have 3 options:

1 (it has above-mentioned drawback)

<input type="checkbox" onchange="doAlert(this)">

<script>
function doAlert(checkboxElem) {
    if (checkboxElem.checked) {
        alert ('hi');
    } else {
        alert ('bye');
    }
}
</script>

2 and 3

<input type="checkbox" id="foo">

<script>
function doAlert() {
    var input = document.querySelector('#foo');

    // input.addEventListener('change', function() { ... });
    // or
    // input.onchange = function() { ... };
    input.addEventListener('change', function() {
        if (input.checked) {
            alert ('hi');
        } else {
            alert ('bye');
        }
    });
}

doAlert();
</script>

Upvotes: 3

Bhavesh Gohel
Bhavesh Gohel

Reputation: 17

Given you use JQuery, you can do something like below :

HTML

<form id="myform">
    syn<input type="checkbox" name="checkfield" id="g01-01"  onclick="doalert()"/>
</form>

JS

function doalert() {
  if ($("#g01-01").is(":checked")) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

Upvotes: 1

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

We can do this using JavaScript, no need of jQuery. Just pass the changed element and let JavaScript handle it.

HTML

<form id="myform">
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>
</form>

JS

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

Demo Here

Upvotes: 84

Asad Palekar
Asad Palekar

Reputation: 301

If you debug your code using developer tools, you will notice that this refers to the window object and not the input control. Consider using the passed in id to retrieve the input and check for checked value. 

function doalert(id){
  if(document.getElementById(id).checked) {
    alert('checked');
  }else{
    alert('unchecked');
  }
}

Upvotes: 0

RobG
RobG

Reputation: 147363

The problem is how you've attached the listener:

<input type="checkbox" ...  onchange="doalert(this.id)">

Inline listeners are effectively wrapped in a function which is called with the element as this. That function then calls the doalert function, but doesn't set its this so it will default to the global object (window in a browser).

Since the window object doesn't have a checked property, this.checked always resolves to false.

If you want this within doalert to be the element, attach the listener using addEventListener:

window.onload = function() {
  var input = document.querySelector('#g01-01');
  if (input) {   
    input.addEventListener('change', doalert, false);
  }
}

Or if you wish to use an inline listener:

<input type="checkbox" ...  onchange="doalert.call(this, this.id)">

Upvotes: 4

Reece Kenney
Reece Kenney

Reputation: 2964

Have you tried using the JQuery change event?

$("#g01-01").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Then you can also remove onchange="doalert(this.id)" from your checkbox :)

Edit:

I don't know if you are using JQuery, but if you're not yet using it, you will need to put the following script in your page so you can use it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Upvotes: 2

guvenckardas
guvenckardas

Reputation: 738

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01" />
</form>

js:

$('#g01-01').on('change',function(){
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked';
    alert(_val);
});

Upvotes: 3

Related Questions