Selektors checked
Selektors :checked atlasa elementus,
kas ir izvēlēti, tas ir, tos, kuriem ir atribūti
checked vai
selected.
Selektors :checked strādā ar izvēles rūtiņām
(checkbox) un
radio pogām
(radio),
kā arī elementiem ar tagu
option.
Lai iegūtu tikai izvēlētās opcijas elementiem
select,
izmanto selektoru
selected.
Sintakse
Tā mēs atlasām elementus ar
atribūtu checked:
$(':checked');
Piemērs
Katru reizi, kad tiek atlasīta izvēles rūtiņa, parādīsim atzīmēto izvēles rūtiņu skaitu. Kā jūs redzat pirms pirmā klikšķa tiks parādītas izvēles rūtiņas, kas ir atlasītas pēc noklusējuma, tā ir otrā un ceturtā:
<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('Atzīmētie: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Piemērs
Klikšķa brīdī parādīsim apakšā katras izvēlētās radio pogas vērtību:
<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() + ' ir atzīmēts!');
});
