Get checkbox status using javascript

Question

This is my checkbox HTML code

<input id="termsCheckbox" name="termsCheckbox" type="checkbox" value="terms" <?PHP echo $terms; ?> class="checkbox">

this is javascript code

var terms = $("#termsCheckbox");

function validateTerms(){
if(termsCheckbox.checked == false){
terms_div.addClass("terms_error");
return false;
}
else{           
terms_div.removeClass("terms_error");
return true;
}
}

I want to check whether checkbox checked or not and if not add a class to terms_div. Please help me to solve this problem. thanks

Rudu · Accepted Answer · 2011-06-02 17:53:29Z

21

You need to access the className variable (pure JS) the following assumes your div has an ID of terms_div, that terms_error is the only class you might want on the div, and that you setup your checkbox with onClick="validateTerms();"

function validateTerms(){
  var c=document.getElementById('termsCheckbox');
  var d=document.getElementById('terms_div');
  if (c.checked) {
    d.className='';
    return true;
  } else { 
    d.className='terms_error';
    return false;
  }
}

edited Jun 2, 2011 at 17:53

answered Jun 1, 2011 at 17:07

Rudu

15.9k4 gold badges51 silver badges66 bronze badges

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

4 Comments

Loktar Over a year ago

heh ours are really close. Only caveat on yours is if there happens to be any other classes assigned to the element itll wipe them out.

Sasindu H Over a year ago

I make only one change to this code d.className='terms_error'; otherwise when i double press the submit button another 'terms_error' will add. thanks

Sasindu H Over a year ago

in this case no any other class in this element. But += will add same class twice.

Rudu Over a year ago

Good point Sassi, the += should have be = although a double click should get a check/uncheck so className shouldn't get messed up (appended once, then cleared).

zod · Accepted Answer · 2011-06-01 16:59:56Z

2

if(document.form.termsCheckbox.checked==true)
alert('check box is cheked')

answered Jun 1, 2011 at 16:59

zod

12.5k25 gold badges74 silver badges107 bronze badges

Comments

karim79 · Accepted Answer · 2011-06-01 16:58:57Z

1

Simply bind an onchange handler to your checkbox.

$("#termsCheckbox").change(function() {

    // class will be removed if checked="checked"
    // otherwise will be added
    $(this).toggleClass("terms_error", !this.checked);
}).change(); // set initial state

answered Jun 1, 2011 at 16:58

karim79

343k67 gold badges420 silver badges409 bronze badges

1 Comment

AR. Over a year ago

it should be ('#terms_div') instead of (this), otherwise that's it.

cusimar9 · Accepted Answer · 2011-06-01 16:59:33Z

0

try adding onclick="validateTerms();" on the checkbox tag

answered Jun 1, 2011 at 16:59

cusimar9

5,2876 gold badges26 silver badges31 bronze badges

1 Comment

techBeginner Over a year ago

inside validateTerms how to check if the cause for event is check or uncheck?

Loktar · Accepted Answer · 2011-06-01 17:09:18Z

0

Live Demo (Click the "Terms Div" text to test)

I didnt see the question tagged with jQuery, but I noticed a jQery selector was used.. so just to be safe I did it with pure JS anyway.

Pure JS

var terms = document.getElementById("termsCheckbox"),
    terms_div = document.getElementById("terms_div");

function validateTerms(){
    if(terms.checked == false){
        if(terms_div.className.indexOf("terms_error")<0){
            terms_div.className += " terms_error";
        }
        return false;
    }else{      
        terms_div.className = terms_div.className.replace(/\bterms_error\b/,'');
        return true;
    }
}

answered Jun 1, 2011 at 17:09

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Collectives™ on Stack Overflow

Get checkbox status using javascript

5 Answers 5

4 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related