risposta-alla-domanda-sullo-sviluppo-web-bd.com

Ottieni il valore della casella di controllo in jQuery

Come posso ottenere un valore di casella di controllo in jQuery?

418
maztt

Per ottenere il valore dell'attributo Value puoi fare qualcosa del genere:

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

Oppure se hai impostato class o id per questo, puoi:

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

Tuttavia questo restituirà il valore same indipendentemente dal fatto che sia selezionato o meno, questo può essere fonte di confusione in quanto è diverso dal comportamento del modulo inviato.

Per verificare se è selezionato o meno, fare:

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

Questi 2 modi funzionano:

  • $('#checkbox').prop('checked')
  • $('#checkbox').is(':checked') (grazie @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" />
188
Alain Tiemblo

Prova questa piccola soluzione: 

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

o

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

L'unico modo corretto di recuperare il valore di una casella di controllo è il seguente

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

come spiegato nelle documentazioni ufficiali nel sito Web di jQuery. Il resto dei metodi non ha nulla a che fare con la proprietà della casella di controllo, stanno controllando l'attributo, il che significa che stanno testando lo stato iniziale della casella di controllo quando è stata caricata. Quindi in breve:

  • Quando hai l'elemento e sai che è una casella di controllo puoi semplicemente leggere la sua proprietà e non avrai bisogno di jQuery per quello (cioè elem.checked) o puoi usare $(elem).prop("checked") se vuoi fare affidamento su jQuery.
  • Se è necessario conoscere (o confrontare) il valore quando l'elemento è stato caricato per la prima volta (vale a dire il valore predefinito), il modo corretto per farlo è $(elem).is(":checked").

Le risposte sono fuorvianti, controlla sotto di te:

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

25
Reza

Giusto per chiarire le cose:

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

Restituirà 'true' o 'false'

14
Greg A
$('#checkbox_id').val();
$('#checkbox_id').is(":checked");
$('#checkbox_id:checked').val();
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);
    });
10

Semplice ma efficace e si presuppone che tu sappia che la casella di controllo sarà trovata:

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

true/false

7
Kevin Shea

Nonostante il fatto che questa domanda richieda una soluzione jQuery, ecco una risposta JavaScript pura poiché nessuno l'ha menzionata.

Senza jQuery:

Basta selezionare l'elemento e accedere alla proprietà checked (che restituisce un valore booleano).

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

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


Ecco un rapido esempio di ascolto dell'evento change:

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


Per selezionare gli elementi selezionati, usa la/pseudo classe :checked (input[type="checkbox"]:checked).

Ecco un esempio che itera sopra gli elementi input controllati e restituisce una matrice mappata dei nomi dell'elemento controllato.

Esempio qui

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>

6
Josh Crozier
//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

Esempio
Demo

5
Kamal

Ecco come ottenere il valore di tutte le caselle di controllo selezionate come una matrice:

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

Usa il seguente codice:

$('input[name^=CheckBoxInput]').val();
1
Myint Thu Lwin
$('.class[value=3]').prop('checked', true);
1
Jacksonit.org
<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>
0
Kuldeep Mishra

Solo attenzione, a partire da oggi, 2018, a causa del cambiamento di API nel corso degli anni. removeAttr è privato, NON funziona più!

Jquery Seleziona o deseleziona una casella di controllo: 

Cattivo, non funziona più. 

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

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

Invece dovresti fare: 

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