Selectorul checked
Selectorul :checked selectează elementele
care sunt bifate, adică cele care au atributele
checked sau
selected.
Selectorul :checked funcționează cu casetele de bifat
(checkbox) și
butoanele radio
(radio),
precum și pentru elementele cu tag-ul
option.
Pentru a obține doar opțiunile selectate ale elementelor
select,
folosiți selectorul
selected.
Sintaxă
Așa selectăm elementele cu
atributul checked:
$(':checked');
Exemplu
Să afișăm, la fiecare bifare a casetei, numărul de casete bifate. După cum vedeți, înainte de primul dvs. click vor fi afișate casetele bifate implicit, adică a doua și a patra:
<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('Bifate: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Exemplu
Să afișăm la click în partea de jos valoarea fiecărui buton radio selectat:
<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() + ' este bifat!');
});
