Ottieni il valore della casella in jQuery


Risposte:


1062

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

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

Oppure se hai impostato un classo idper esso, puoi:

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

Tuttavia, questo restituirà lo stesso valore, indipendentemente dal fatto che sia selezionato o meno, ciò può creare confusione in quanto diverso dal comportamento del modulo inviato.

Per verificare se è selezionato o meno, procedere come segue:

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

3
Cosa fa il primo esempio se ci sono più caselle di controllo nella pagina? A proposito, può essere scritto in modo più breve $("input:checkbox"). Inoltre, sembra che ci sia un refuso nel selettore di classe ...
Jawa

1
@Jawa: il primo era solo un esempio per mostrare la sintassi e grazie per quel refuso.
Sarfraz,

136
Se provo $($0).val()in Chrome e deseleziono la casella di controllo, la risposta è "attiva" anche se non è selezionata. Ma $($0).is(":checked")restituisce il giusto valore.
Adrien,

2
@Jawa Per api.jquery.com/checkbox-selector [type="checkbox"] ha prestazioni migliori nei browser moderni rispetto a :checkbox.
TrueWill,

3
Sostituisci $('#check_id').val();per $('#check_id').is(":checked");restituire il valore vero o falso.
Matheus Miranda,

228

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


9
.is ('checked') non ha funzionato perché dovrebbe essere .is (': checked')
mgsloan

La ringrazio per la risposta. Questa è una risposta all'avanguardia con la funzione jQuery prop ()
Thomas.Benz,

58

Prova questa piccola soluzione:

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

o

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

Oppure !! ($ ("# some_id"). Attr ("controllato"))
COOLGAMETUBE

34

L'unico modo corretto per recuperare il valore di una casella è 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 (ovvero il valore predefinito), il modo corretto per farlo è $(elem).is(":checked").

Le risposte sono fuorvianti, controlla sotto di te:

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


.is(":checked")e .prop(":checked")stanno lavorando allo stesso modo per me con jQuery 1.10.0
Josh,

23

Giusto per chiarire le cose:

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

Restituirà 'vero' o 'falso'


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

non funziona. potresti aver bisogno di una colonna prima di selezionare ': checked'
utileBee

9
.val () non funziona. Restituisce "attivo" indipendentemente da selezionato.
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);
    });

10

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

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

true/false


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


5

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

Senza jQuery:

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

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

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


Ecco un breve esempio ascoltando l' changeevento:

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


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

Ecco un esempio che ripete verificato input elementi e restituisce un array mappato dei nomi degli elementi selezionati.

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


1
Questo non risponde alla domanda.
Michael Cole,

@MichaelCole - Ho appena riletto la domanda (3 anni dopo) e sembra che questo risponda effettivamente alla domanda, quindi sentiti libero di elaborare.
Josh Crozier,

1
"Come posso ottenere il valore di una casella in jQuery?" -> "Nonostante il fatto che questa domanda richieda una soluzione jQuery ... blah blah blah". È una risposta da soap box, come altre risposte effettive, ed è per questo che l'ho sottovalutata.
Michael Cole,

1
@MichaelCole - Abbastanza giusto, il feedback è sempre apprezzato. L'intento originale di questa risposta era di indicare che jQuery può essere evitato in casi insignificanti come questo quando la checkedproprietà è facilmente accessibile sull'elemento DOM nativo. Alcune persone che cercano domande / risposte come queste generalmente non sono consapevoli del fatto che jQuery a volte non è necessario. In altre parole, le persone dalla mentalità ristretta non sono il target demografico per questa risposta.
Josh Crozier,

2

Ecco come ottenere il valore di tutte le caselle di controllo selezionate come un array:

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

2

per ottenere il valore di checkboxex controllato in 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
});

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


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

1
La domanda è chiedersi come ottenere il valore e non come controllare qualcosa con un determinato valore predefinito.
Quentin,

0

Il modo migliore è $('input[name="line"]:checked').val()

E puoi anche ottenere il testo selezionato $('input[name="line"]:checked').text()

Aggiungi l'attributo valore e il nome agli input dei pulsanti di opzione. Assicurarsi che tutti gli input abbiano lo stesso attributo nome.

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

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

-1

Solo attenzione, ad oggi, 2018, a causa del cambiamento di api nel corso degli anni. removeAttr è deprecato, 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);
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.