Checked-selector

Selectoren :checked vælger elementer, der er valgt, det vil sige dem, som har attributterne checked eller selected. Selectoren :checked fungerer med checkbokse (checkbox) og radio knapper (radio), samt for elementer med tagget option. For kun at få de valgte muligheder fra elementer med select, anvend selectoren selected.

Syntaks

Sådan vælger vi elementer med attributten checked:

javascript$(':checked');

Eksempel

Lad os ved hvert valg af en checkbox vise antallet af valgte checkbokse. Som du kan se, vil der før dit første klik blive vist checkbokse, valgt som standard, det er den anden og fjerde:

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('Valgte: ' + n);
};
countChecked();

$('input[type=checkbox]').on('click', countChecked);

Eksempel

Lad os ved klik vises nedenunder værdien af hver valgt radio knap:

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() + ' er valgt!');
});

Se også