Obtener el valor de la casilla de verificación en jQuery

Respuestas:

1062

Para obtener el valor del atributo Value, puede hacer algo como esto:

$("input[type='checkbox']").val();

O si ha configurado un classo idpara ello, puede:

$('#check_id').val();
$('.check_class').val();

Sin embargo, esto devolverá el mismo valor si está marcado o no, esto puede ser confuso ya que es diferente al comportamiento del formulario enviado.

Para verificar si está marcado o no, haga lo siguiente:

if ($('#check_id').is(":checked"))
{
  // it is checked
}
Sarfraz
fuente
3
¿Qué hace el primer ejemplo si hay varias casillas de verificación en la página? Por cierto, se puede escribir de una manera más corta $("input:checkbox"). Además, parece haber un error tipográfico en el selector de clase ...
Jawa
1
@Jawa: El primero fue solo un ejemplo para mostrar la sintaxis y gracias por ese error tipográfico.
Sarfraz
136
Si lo intento $($0).val()en Chrome y desactivo la casilla de verificación, la respuesta está "activada" aunque no esté marcada. Pero $($0).is(":checked")devuelve el valor correcto.
Adrien
2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] tiene un mejor rendimiento en los navegadores modernos que :checkbox.
TrueWill
3
Reemplace $('#check_id').val();para $('#check_id').is(":checked");devolver el valor verdadero o falso.
Matheus Miranda
228

Esas 2 formas están funcionando:

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked')(gracias @mgsloan)

$('#test').click(function() {
    alert("Checkbox state (method 1) = " + $('#test').prop('checked'));
    alert("Checkbox state (method 2) = " + $('#test').is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Check me: <input id="test" type="checkbox" />

Alain Tiemblo
fuente
99
.is ('marcado') no funcionó porque debería ser .is (': marcado')
mgsloan
Gracias por su respuesta. Esta es una respuesta de vanguardia con la función jQuery prop ()
Thomas.Benz
58

Prueba esta pequeña solución:

$("#some_id").attr("checked") ? 1 : 0;

o

$("#some_id").attr("checked") || 0;
RDK
fuente
O !! ($ ("# some_id"). Attr ("checked"))
COOLGAMETUBE
34

Las únicas formas correctas de recuperar el valor de una casilla de verificación son las siguientes

if ( elem.checked ) 
if ( $( elem ).prop( "checked" ) ) 
if ( $( elem ).is( ":checked" ) ) 

como se explica en las documentaciones oficiales en el sitio web de jQuery. El resto de los métodos no tiene nada que ver con la propiedad de la casilla de verificación, están verificando el atributo, lo que significa que están probando el estado inicial de la casilla de verificación cuando se cargó. En resumen:

  • Cuando tenga el elemento y sepa que es una casilla de verificación, simplemente puede leer su propiedad y no necesitará jQuery para eso (es decir elem.checked) o puede usarlo $(elem).prop("checked")si desea confiar en jQuery.
  • Si necesita saber (o comparar) el valor cuando se cargó el elemento por primera vez (es decir, el valor predeterminado), la forma correcta de hacerlo es $(elem).is(":checked").

Las respuestas son engañosas, por favor verifique usted mismo a continuación

http://api.jquery.com/prop/

Reza
fuente
.is(":checked")y .prop(":checked")están trabajando lo mismo para mí con jQuery 1.10.0
Josh
23

Solo para aclarar cosas:

$('#checkbox_ID').is(":checked")

Devolverá 'verdadero' o 'falso'

Greg A
fuente
14
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
Nalan Madheswaran
fuente
No funciona. es posible que tenga una columna previamente revisada ': marcado'
usefulBee
99
.val () no funciona. Devuelve 'on' independientemente de lo marcado.
Michael Cole
11
jQuery(".checkboxClass").click(function(){
        var selectedCountry = new Array();
        var n = jQuery(".checkboxClass:checked").length;
        if (n > 0){
            jQuery(".checkboxClass:checked").each(function(){
                selectedCountry.push($(this).val());
            });
        }
        alert(selectedCountry);
    });
Jaskaran singh Rajal
fuente
10

Simple pero efectivo y supone que sabes que la casilla de verificación se encontrará:

$("#some_id")[0].checked;

Da true/false

Kevin Shea
fuente
9
//By each()
var testval = [];
 $('.hobbies_class:checked').each(function() {
   testval.push($(this).val());
 });


//by map()
var testval = $('input:checkbox:checked.hobbies_class').map(function(){
return this.value; }).get().join(",");

 //HTML Code

 <input type="checkbox" value="cricket" name="hobbies[]"  class="hobbies_class">Cricket 
  <input type="checkbox" value="hockey" name="hobbies[]" class="hobbies_class">Hockey


Demo de ejemplo

Kamal
fuente
5

A pesar de que esta pregunta está pidiendo una solución jQuery, aquí hay una respuesta pura de JavaScript ya que nadie la ha mencionado.

Sin jQuery:

Simplemente seleccione el elemento y acceda a la checkedpropiedad (que devuelve un valor booleano).

var checkbox = document.querySelector('input[type="checkbox"]');

alert(checkbox.checked);
<input type="checkbox"/>


Aquí hay un ejemplo rápido escuchando el changeevento:

var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function (e) {
    alert(this.checked);
});
<input type="checkbox"/>


Para seleccionar elementos marcados, use la :checkedpseudo clase ( input[type="checkbox"]:checked).

Aquí hay un ejemplo que itera sobre los inputelementos marcados y devuelve una matriz mapeada de los nombres de los elementos marcados.

Ejemplo aquí

var elements = document.querySelectorAll('input[type="checkbox"]:checked');
var checkedElements = Array.prototype.map.call(elements, function (el, i) {
    return el.name;
});

console.log(checkedElements);

Josh Crozier
fuente
1
Esto no responde la pregunta.
Michael Cole
@MichaelCole - Acabo de releer la pregunta (3 años después) y parece que esto realmente responde la pregunta, así que siéntase libre de elaborar.
Josh Crozier
1
"¿Cómo puedo obtener el valor de una casilla de verificación en jQuery?" -> "A pesar de que esta pregunta es pedir una solución jQuery ... bla, bla, bla". Es una respuesta de caja de jabón, en la forma de otras respuestas reales, y es por eso que la rechacé.
Michael Cole
1
@MichaelCole - Bastante justo, los comentarios siempre son apreciados. La intención original de esta respuesta era indicar que jQuery se puede evitar en casos triviales como este cuando la checkedpropiedad es fácilmente accesible en el elemento DOM nativo. Algunas de las personas que buscan preguntas / respuestas como estas generalmente no son conscientes del hecho de que jQuery a veces no es necesario. En otras palabras, las personas de mente estrecha no son el objetivo demográfico para esta respuesta.
Josh Crozier
2

Aquí se explica cómo obtener el valor de todas las casillas marcadas como una matriz:

var values = (function() {
                var a = [];
                $(".checkboxes:checked").each(function() {
                    a.push(this.value);
                });
                return a;
            })()
Faraz Kelhini
fuente
2

para obtener el valor de checkboxex marcado en jquery:

var checks = $("input[type='checkbox']:checked"); // returns object of checkeds.

for(var i=0; i<checks.length; i++){
    console.log($(checks[i]).val()); // or do what you want
});

en pure js:

var checks = document.querySelectorAll("input[type='checkbox']:checked");

for(var i=0; i<checks.length; i++){
    console.log(checks[i].value); // or do what you want
});
ttrasn
fuente
0

Utiliza el siguiente código:

$('input[name^=CheckBoxInput]').val();
Myint Thu Lwin
fuente
0
$('.class[value=3]').prop('checked', true);
Jacksonit.org
fuente
1
La pregunta es cómo obtener el valor, no cómo verificar algo con un valor predeterminado en particular.
Quentin
0

La mejor manera es $('input[name="line"]:checked').val()

Y también puedes obtener el texto seleccionado $('input[name="line"]:checked').text()

Agregue un atributo de valor y nombre a sus entradas de botón de radio. Asegúrese de que todas las entradas tengan el mismo atributo de nombre.

<div class="col-8 m-radio-inline">
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="1" checked> Value Text 1
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="2"> Value Text 2
    </label>
    <label class="m-radio m-radio-filter">
        <input type="radio" name="line" value="3"> Value Text 3
    </label>
</div>
Hayrullah Cansu
fuente
-1
<script type="text/javascript">
$(document).ready(function(){
    $('.laravel').click(function(){
        var val = $(this).is(":checked");
        $('#category').submit();
    });
});

<form action="{{route('directory')}}" method="post" id="category">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input name="category" value="{{$name->id}}"  class="laravel" type="checkbox">{{$name->name}}
                      </form>
Kuldeep Mishra
fuente
-1

Solo atención, a partir de hoy, 2018, debido al cambio de la API a lo largo de los años. removeAttr están depricados, ¡ya no funcionan!

Marque o desmarque una casilla de verificación:

Malo, ya no funciona.

   $('#add_user_certificate_checkbox').removeAttr("checked");

   $('#add_user_certificate_checkbox').attr("checked","checked");

En cambio, debes hacer:

      $('#add_user_certificate_checkbox').prop('checked', true);
      $('#add_user_certificate_checkbox').prop('checked', false);
hoogw
fuente