web-dev-qa-db-fra.com

effectuer une action sur case à cocher événement coché ou non coché sur le formulaire html

J'ai une case à cocher sur un formulaire qui est décochée par défaut, comme d'habitude. Maintenant, je veux effectuer deux actions séparées sur coché et non coché de cette case.

c'est ma case à cocher:

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

et voici mon script:

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

il ne fait qu'émettre des alertes! Quelle est la meilleure façon de le faire.

javascripthtmlcheckbox
14
shekoufeh

Nous pouvons le faire en utilisant JavaScript, pas besoin de jQuery. Il suffit de transmettre l'élément modifié et de laisser JavaScript le gérer.

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

Démo ici 

36
Shrinivas Pai
<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);
});
3
guvenckardas

Le problème est de savoir comment vous avez attaché l'auditeur:

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

Les écouteurs inline sont effectivement encapsulés dans une fonction appelée avec l'élément comme this. Cette fonction appelle ensuite la fonction doalert, mais ne définit pas son this, elle sera donc définie par défaut sur l'objet global (fenêtre dans un navigateur).

Étant donné que l'objet window n'a pas de propriété vérifié, this.checked est toujours résolu en false.

Si vous voulez que this dans doalert soit l'élément, attachez le programme d'écoute à l'aide de addEventListener:

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

Ou si vous souhaitez utiliser un auditeur intégré:

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

Avez-vous essayé d'utiliser l'événement JQuery change?

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

Ensuite, vous pouvez également supprimer onchange="doalert(this.id)" de votre case à cocher :)

Modifier:

Je ne sais pas si vous utilisez JQuery, mais si vous ne l'utilisez pas encore, vous devrez insérer le script suivant dans votre page pour pouvoir l'utiliser:

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

Étant donné que vous utilisez JQuery, vous pouvez faire quelque chose comme ci-dessous:

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");
  }
}
1
Bhavesh Gohel

Si vous déboguez votre code à l'aide des outils de développement, vous remarquerez que this fait référence à l'objet window et non au contrôle de saisie. Pensez à utiliser l'ID passé dans pour récupérer l'entrée et vérifier la valeur checked. 

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