Der :checked-Selektor
Der Selektor :checked wählt Elemente aus,
die ausgewählt sind, also solche, die die Attribute
checked oder
selected haben.
Der Selektor :checked funktioniert mit Checkboxen
(checkbox) und
Radio-Buttons
(radio),
sowie für Elemente mit dem Tag
option.
Um nur die ausgewählten Optionen von
select-Elementen zu erhalten,
verwenden Sie den Selektor
selected.
Syntax
So wählen wir Elemente mit dem
Attribut checked aus:
$(':checked');
Beispiel
Lassen Sie uns bei jeder Auswahl einer Checkbox die Anzahl der ausgewählten Checkboxen anzeigen. Wie Sie sehen, werden bis zu Ihrem ersten Klick die standardmäßig ausgewählten Checkboxen angezeigt, dies sind die zweite und vierte:
<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);
Beispiel
Lassen Sie uns per Klick den Wert jedes ausgewählten Radio-Buttons unten anzeigen:
<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!');
});
