web-dev-qa-db-fra.com

Obtenir la valeur de la case à cocher cochée?

Donc, j'ai un code qui ressemble à ceci:

<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">

J'ai juste besoin de Javascript pour obtenir la valeur de la case à cocher actuellement cochée.

EDIT: Pour l’ajouter, UNE seule case sera cochée.

javascriptcheckbox
139
Mandatory Programmer

Pour les navigateurs modernes :

var checkedValue = document.querySelector('.messageCheckbox:checked').value;

En utilisant jQuery:

var checkedValue = $('.messageCheckbox:checked').val();

Javascript pur sans jQuery:

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}
206
Engineer

Aucun de ce qui précède n'a fonctionné pour moi, mais utilisez simplement ceci:

document.querySelector('.messageCheckbox').checked;

Bonne codage.

206
JanBorup

J'utilise ceci dans mon code.Essayez ceci

var x=$("#checkbox").is(":checked");

Si la case est cochée, x sera vrai, sinon ce sera faux.

97
user1683014

en clair javascript:

function test() {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        alert(i + (cboxes[i].checked?' checked ':' unchecked ') + cboxes[i].value);
    }
}

function selectOnlyOne(current_clicked) {
    var cboxes = document.getElementsByName('mailId[]');
    var len = cboxes.length;
    for (var i=0; i<len; i++) {
        cboxes[i].checked = (cboxes[i] == current);
    }
}
10
Stano

Cela ne répond pas directement à la question, mais peut aider les futurs visiteurs.

Si vous voulez qu'une variable soit toujours l'état actuel de la case à cocher (plutôt que de devoir vérifier son état), vous pouvez modifier l'événement onchange pour définir cette variable.

Cela peut être fait dans le HTML:

<input class='messageCheckbox' type='checkbox' onchange='some_var=this.checked;'>

ou avec JavaScript:

cb = document.getElementsByClassName('messageCheckbox')[0]
cb.addEventListener('change', function(){some_var = this.checked})
4
Joe Iddon

$(document).ready(function() {
  var ckbox = $("input[name='ips']");
  var chkId = '';
  $('input').on('click', function() {
    
    if (ckbox.is(':checked')) {
      $("input[name='ips']:checked").each ( function() {
   			chkId = $(this).val() + ",";
        chkId = chkId.slice(0, -1);
 	  });
       
       alert ( $(this).val() ); // return all values of checkboxes checked
       alert(chkId); // return value of checkbox checked
    }     
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" name="ips" value="12520">
<input type="checkbox" name="ips" value="12521">
<input type="checkbox" name="ips" value="12522">

3
Marinha do Nascimento

Utilisez ceci:

alert($(".messageCheckbox").is(":checked").val())

Cela suppose que les cases à cocher pour vérifier ont la classe "messageCheckbox", sinon vous devrez vérifier si l'entrée est le type de case à cocher, etc.

2
jackJoe
<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="3" name="mailId[]">

<input class="messageCheckbox" type="checkbox" onchange="getValue(this.value)" value="1" name="mailId[]">

function getValue(value){
    alert(value);
}
0
Alien

Si vous utilisez Interface utilisateur sémantique React , data est passé en tant que deuxième paramètre à l'événement onChange.

Vous pouvez donc accéder à la propriété checked comme suit:

<Checkbox label="Conference" onChange={(e, d) => console.log(d.checked)} />
0
Dave Clark