Obtenir la valeur de la case cochée?

177

J'ai donc du 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 ajouter, il n'y aura qu'une seule case cochée.

Matthew 'obligatoire' Bryant
la source
1
Vous avez besoin de code javascript ou jQuery?
Andrey Vorobyev du
6
Pourquoi ne pas utiliser le bouton radio?
PraveenVenu
Parce que j'écris un plugin pour un site
Matthew 'obligatoire' Bryant
Si vous n'avez besoin que d'une seule case à cocher, pourquoi n'utilisez-vous pas de boutons radio? c'est le composant d'interface utilisateur le plus approprié pour ce travail.
Tal Yaron
@TalYaron Pouvez-vous désélectionner un bouton radio? Je pense pas sans code js. Peut-être que l'OP souhaite désélectionner facilement la case.
R3tep

Réponses:

256

Pour les navigateurs modernes :

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

En utilisantjQuery :

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

JavaScript pur sansjQuery :

var checkedValue = null; 
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue = inputElements[i].value;
           break;
      }
}
Ingénieur
la source
9
@Mageek c'est une mauvaise pratique d'ajouter le même identifiant sur plusieurs éléments.
Ingénieur
@Engineer Non, il suffit de mettre un identifiant différent pour chaque case à cocher.
Mageek
3
@Engineer "Saving bytes" car il faut simplement écrire document.getElementById("foo").value();et "sauvegarder les calculs" car getElementByIdc'est sûrement plus rapide qu'une getElementsByTagNameboucle.
Mageek
9
pour jQuery .is(":checked")est le bon moyen car .val()il retournera la valeur de l'attribut s'il est défini .. et même si ce n'est pas défini, il retournera "on" et non une valeur booléenne .. jsfiddle.net/d5f7wnzu
Peter
1
document.querySelector('.messageCheckbox:checked').valuegénère TypeError si aucune case n'est cochée
Meisner
262

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

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

Bon codage.

JanBorup
la source
Je suis d'accord. Vous avez confirmé ce que je pensais. J'aime mettre var chk1 = document.getElementById ('messageCheckbox'); De cette façon, je peux référencer les propriétés de la variable "chk1": vérifié, activé, style, etc.
JustJohn
4
Où avez-vous obtenu cela id? Pouvez-vous expliquer? Le gars qui a posé la question utilisé classdans l'entrée en fait. Ce sera bien si vous pouvez fournir le code complet afin que je puisse comprendre d'où vous avez obtenu leid
devfaysal
3
Cela ne peut pas fonctionner avec l'exemple de code fourni par OP ... Je suis curieux de savoir pourquoi il a reçu autant de votes positifs sans répondre à la question, bien qu'une solution rapide puisse résoudre le problème.
Laurent S.15
1
Pouvez-vous modifier votre proposition de réponse pour expliquer ce que cela fait et comment cela répond au PO?
Ro Yo Mi
2
@PradeepKumarPrabaharan probablement des gens comme moi (n'utilisant pas d'identifiant pour plusieurs éléments) se demandant pourquoi .value leur donnait des informations non définies.
111

J'utilise ceci dans mon code, essayez ceci

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

Si la case est cochée, xelle sera vraie sinon elle sera fausse.

user1683014
la source
7
Cela ne répond pas à la question, mais peut être utilisé pour déterminer si une case est cochée ou non. +1 car cela m'a toujours aidé.
Kevin Jurkowski
5
Ne répond pas à la question mais c'est exactement ce que je cherchais.
phn
Utile quand #checkboxest une variable, par exemple myCheckbox.
Optimae
15

en javascript simple:

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);
    }
}
Stano
la source
4

$(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">

Marinha do Nascimento
la source
4

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 continuer à vérifier son état), vous pouvez modifier l' onchangeévénement 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})
Joe Iddon
la source
2

Utilisez ceci:

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

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

jackJoe
la source
2
<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);
}
Extraterrestre
la source
0

Si vous utilisez Semantic UI React , dataest passé comme deuxième paramètre de l' onChangeévénement.

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

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

Rien de ce qui précède n'a fonctionné pour moi sans lancer d'erreurs dans la console lorsque la case n'était pas cochée, j'ai donc fait quelque chose de ce genre à la place (onclick et la fonction de case à cocher ne sont utilisées qu'à des fins de démonstration, dans mon cas d'utilisation, cela fait partie d'un fonction de soumission de formulaire beaucoup plus grande):

function checkbox() {
  var checked = false;
  if (document.querySelector('#opt1:checked')) {
     checked = true;
  }
  document.getElementById('msg').innerText = checked;
}
<input type="checkbox" onclick="checkbox()" id="opt1"> <span id="msg">Click The Box</span>

pimenter
la source
-3

Dans mon projet, j'utilise généralement ces extraits:

var type[];
$("input[name='messageCheckbox']:checked").each(function (i) {
                type[i] = $(this).val();
            });

Et ça marche bien. Sincères salutations.

VanThaoNguyen
la source
Une manière extrêmement inefficace de faire cela.
AStopher