Selettore checked
Il selettore :checked seleziona gli elementi
che sono selezionati, cioè quelli che hanno gli attributi
checked o
selected.
Il selettore :checked funziona con le caselle di controllo
(checkbox) e
i pulsanti radio
(radio),
così come per gli elementi con il tag
option.
Per ottenere solo le opzioni selezionate degli elementi
select,
utilizza il selettore
selected.
Sintassi
In questo modo selezioniamo gli elementi con
l'attributo checked:
$(':checked');
Esempio
Ogni volta che una casella di controllo viene selezionata, visualizziamo il numero di caselle di controllo selezionate. Come puoi vedere, prima del tuo primo clic verranno visualizzate le caselle di controllo selezionate per impostazione predefinita, cioè la seconda e la quarta:
<form>
<p>
<input type="checkbox" name="cbox" value="one">
<input type="checkbox" name="cbox" value="two" checked="checked">
<input type="checkbox" name="cbox" value="three">
<input type="checkbox" name="cbox" value="four" checked>
<input type="checkbox" name="cbox" value="five">
</p>
</form>
<div></div>
div {
color: green;
}
let countChecked = function() {
let n = $('input:checked').length;
$('div').text('Checked: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Esempio
Al clic, visualizziamo in fondo il valore di ogni pulsante radio selezionato:
<form>
<div>
<input type="radio" name="digits" value="one" id="one">
<label for="one">one</label>
</div>
<div>
<input type="radio" name="digits" value="two" id="two">
<label for="two">two</label>
</div>
<div>
<input type="radio" name="digits" value="three" id="three">
<label for="three">three</label>
</div>
<div id="text"></div>
</form>
input, label {
line-height: 1.5em;
}
$('input').on('click', function() {
$('#text').html($('input:checked').val() + ' is checked!');
});
