Selektor checked

Selektor :checked secilmis elementləri seçir, yəni checked və ya selected atributlarına malik olanları. Selektor :checked qutucuqlarla (checkbox) və radio düymələrlə (radio) işləyir, həmçinin option teqinə malik elementlərlə də. select elementlərinin yalnız secilmiş opsiyalarını almaq üçün selected selektorundan istifadə edin.

Sintaksis

Beləliklə, biz checked atributuna malik elementləri seçirik:

javascript$(':checked');

Nümunə

Gəlin hər bir qutucuq seçildikdə, secilmiş qutucuqların sayını göstərək. Gördüyünüz kimi, ilk klikinizdən əvvəl standart olaraq secilmiş qutucuqlar göstəriləcək, bu da ikinci və dördüncüdür:

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);

Nümunə

Gəlin klik zamanı aşağıda hər bir secilmiş radio düyməsinin dəyərini göstərək:

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!');
});

Həmçinin bax