web-dev-qa-db-fra.com

Obtenir le statut de la case à cocher en utilisant javascript

Ceci est mon code HTML case à cocher

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

c'est du code javascript

var terms = $("#termsCheckbox");

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

Je veux vérifier si la case à cocher est cochée ou non et si ce n'est pas le cas, ajoutez une classe à terms_div. S'il vous plaît aidez-moi à résoudre ce problème. Merci

javascriptcheckboxusingstatus
8
Sasindu H

Vous devez accéder à la variable className (JS pure) (le code suivant suppose que votre div a un ID de terms_div, que terms_error est la seule classe que vous souhaitiez utiliser dans div et que vous avez configuré votre case à cocher avec 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;
  }
}
13
Rudu

Démo en direct(Cliquez sur le texte "Terms Div" pour tester)

Je n'ai pas vu la question étiquetée avec jQuery, mais j'ai remarqué qu'un sélecteur jQery était utilisé .. donc juste pour être sûr, je l'ai fait avec du JS pur de toute façon.

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;
    }
}
1
Loktar

Liez simplement un gestionnaire onchange à votre case à cocher.

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

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

essayez d'ajouter onclick="validateTerms();" sur la balise de case à cocher

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