:checked Seçici
:checked seçicisi, seçilmiş öğeleri,
yani checked veya
selected özniteliklerine
sahip olanları seçer.
:checked seçicisi, onay kutuları
(checkbox) ve
radyo düğmeleri
(radio)
ile birlikte option
etiketine sahip öğelerle de çalışır.
select öğelerinin
sadece seçilmiş seçeneklerini almak için,
selected
seçicisini kullanın.
Sözdizimi
checked özniteliğine sahip öğeleri
şu şekilde seçeriz:
$(':checked');
Örnek
Her onay kutusu seçildiğinde, seçili onay kutularının sayısını gösterelim. Gördüğünüz gibi, ilk tıklamanızdan önce varsayılan olarak seçili olan onay kutuları gösterilecek, bunlar ikinci ve dördüncü olanlar:
<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('Seçili: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Örnek
Tıklama ile aşağıda her seçili radyo düğmesinin değerini gösterelim:
<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() + ' seçili!');
});
