seleccionar - jquery get all checkbox checked

Obtener valor de casilla de verificación en jQuery

Question

¿Cómo puedo obtener el valor de una casilla de verificación en jQuery?

Answer 1

$ (''. class [value = 3]''). prop (''checked'', true);

Answer 2

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

Sin jQuery:

Simplemente seleccione el elemento y acceda a la propiedad checked (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 evento de change :

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

<input type="checkbox"/>

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

Este es un ejemplo que itera sobre elementos de input marcados y devuelve una matriz asignada 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);

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

console.log(checkedElements);

<div class="parent">
    <input type="checkbox" name="name1" />
    <input type="checkbox" name="name2" />
    <input type="checkbox" name="name3" checked="checked" />
    <input type="checkbox" name="name4" checked="checked" />
    <input type="checkbox" name="name5" />
</div>

Answer 3

Aquí es cómo obtener el valor de todas las casillas de verificación marcadas como una matriz:

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

Answer 4

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

Answer 5

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 la página 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ó. Así que en resumen:

• Cuando tiene el elemento y sabe que es una casilla de verificación, simplemente puede leer su propiedad y no necesitará jQuery para eso (es decir, elem.checked ) o puede usar $(elem).prop("checked") si quiero 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 marque a continuación:

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

Answer 6

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

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

O si ha establecido una class o una id para ello, puede:

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

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

Para verificar si está marcado o no, haga:

if ($(''#check_id'').is(":checked"))
{
  // it is checked
}

Answer 7

Prueba esta pequeña solución:

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

o

$("#some_id").attr("checked") || 0;

Answer 8

Simple pero efectivo y asume que usted sabe que la casilla se encontrará:

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

Da true / false

Answer 9

Solo atención, a partir de hoy, 2018, debido al cambio de API a lo largo de los años. removeAttr está abatido, ¡NO funciona más!

Jquery 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 su lugar deberías hacer:

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

Answer 10

Solo para aclarar las cosas:

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

Devolverá ''verdadero'' o ''falso''

Answer 11

Use This $ (''input [name ^ = CheckBoxInput]''). Val ();

Answer 12

$(''#checkbox_id'').val();
$(''#checkbox_id'').is(":checked");
$(''#checkbox_id:checked'').val();

Answer 13

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

Answer 14

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

Ejemplo
Demo

Answer 15

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