Obtener el valor de la casilla marcada?


177

Entonces tengo un código que se ve así:

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

Solo necesito Javascript para obtener el valor de cualquier casilla de verificación que esté marcada actualmente.

EDITAR : Para agregar, solo habrá UNA casilla marcada.


1
¿Necesita código javascript o jQuery?
Andrey Vorobyev

66
¿Por qué no usar el botón de radio?
PraveenVenu

Porque estoy escribiendo un complemento para un sitio
Matthew 'obligatorio' Bryant

Si solo necesita una casilla de verificación, ¿por qué no utiliza botones de radio? Este es el componente de interfaz de usuario más adecuado para este trabajo.
Tal Yaron

@TalYaron ¿Puedes anular la selección de un botón de radio? Creo que no sin el código js. Quizás el OP quiera anular la selección de la casilla fácilmente.
R3tep

Respuestas:


256

Para navegadores modernos :

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

Al usarjQuery :

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

JavaScript puro sinjQuery :

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

9
@Mageek es una mala práctica agregar la misma identificación en varios elementos.
Ingeniero

@ Ingeniero No, solo coloca una identificación diferente para cada casilla de verificación.
Mageek

3
@Engineer "Guardando bytes" porque simplemente debemos escribir document.getElementById("foo").value();y "guardar cálculos" porque getElementByIdseguramente es más rápido que getElementsByTagNameun bucle.
Mageek

9
para jQuery .is(":checked")es la forma correcta, ya .val()que devolverá el valor del atributo si está definido ... e incluso si no está definido, devolverá "on" y no un valor booleano ... jsfiddle.net/d5f7wnzu
Peter

1
document.querySelector('.messageCheckbox:checked').valuegenera TypeError si no está marcada la casilla de verificación
Meisner

262

Nada de lo anterior funcionó para mí, pero simplemente use esto:

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

Feliz codificación


Estoy de acuerdo. Confirmaste lo que pensaba. Me gusta poner var chk1 = document.getElementById ('messageCheckbox'); De esa manera puedo hacer referencia a las propiedades de la variable "chk1": marcada, habilitada, estilo, etc.
JustJohn

44
¿De dónde sacaste eso id? ¿Puede usted explicar por favor? El tipo que hizo la pregunta utilizada classen la entrada en realidad. Será bueno si puede proporcionar el código completo para que pueda entender de dónde obtuvo elid
devfaysal

3
Esto no puede funcionar con el código de ejemplo proporcionado por OP ... Tengo curiosidad por saber por qué recibió tantos votos positivos sin responder la pregunta, aunque una solución rápida podría hacerlo bien.
Laurent S.

1
¿Puede editar su respuesta propuesta para ampliar lo que hace y cómo aborda el OP?
Ro Yo Mi

2
@PradeepKumarPrabaharan probablemente personas como yo (que no usan identificación para varios elementos) se preguntan por qué .value les estaba dando indefinido.

111

Estoy usando esto en mi código. Prueba esto

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

Si la casilla está marcada xserá verdadera, de lo contrario será falsa.


77
Esto no responde la pregunta, pero puede usarse para determinar si una casilla de verificación está marcada o no. +1 ya que todavía me ayudó.
Kevin Jurkowski el

55
No responde la pregunta, pero es exactamente lo que estaba buscando.
phn

Útil cuando #checkboxes una variable, por ejemplo 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);
    }
}

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


4

Esto no responde directamente a la pregunta, pero puede ayudar a futuros visitantes.


Si desea que una variable sea siempre el estado actual de la casilla de verificación (en lugar de tener que seguir comprobando su estado), puede modificar el onchangeevento para establecer esa variable.

Esto se puede hacer en el HTML:

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

o con JavaScript:

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

2

Utilizar este:

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

Esto supone que las casillas de verificación para marcar tienen la clase "messageCheckbox", de lo contrario, tendría que hacer una comprobación si la entrada es el tipo de casilla de verificación, etc.


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

0

Si está utilizando Semantic UI React , datase pasa como el segundo parámetro al onChangeevento.

Por lo tanto, puede acceder a la checkedpropiedad de la siguiente manera:

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

0

Nada de lo anterior funcionó para mí sin arrojar errores en la consola cuando la casilla no estaba marcada, así que hice algo en este sentido (onclick y la función de casilla de verificación solo se usan con fines de demostración, en mi caso de uso es parte de un función de envío de formularios mucho más 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>


-3

En mi proyecto, generalmente uso estos fragmentos:

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

Y funciona bien. Cordial saludo.


Una forma extremadamente ineficiente de hacerlo.
AStopher
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.