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:

javascript$(':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:

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

cssdiv {
  color: green;
}

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

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

cssinput, label {
  line-height: 1.5em;
}

javascript$('input').on('click', function() {
  $('#text').html($('input:checked').val() + ' is checked!');
});

Siehe auch