Επιλογέας checked
Ο επιλογέας :checked επιλέγει στοιχεία,
που είναι επιλεγμένα, δηλαδή εκείνα που έχουν τα χαρακτηριστικά
checked ή
selected.
Ο επιλογέας :checked λειτουργεί με τα κουτιά ελέγχου
(checkbox) και
τους διακόπτες radio
(radio),
καθώς και για στοιχεία με την ετικέτα
option.
Για να λάβετε μόνο τις επιλεγμένες επιλογές στοιχείων
select,
χρησιμοποιήστε τον επιλογέα
selected.
Σύνταξη
Έτσι επιλέγουμε στοιχεία με
το χαρακτηριστικό checked:
$(':checked');
Παράδειγμα
Ας, κάθε φορά που επιλέγεται ένα κουτί ελέγχου, εμφανίζουμε τον αριθμό των επιλεγμένων κουτιών ελέγχου. Όπως βλέπετε πριν από το πρώτο σας κλικ θα εμφανιστούν τα κουτιά ελέγχου, που είναι επιλεγμένα από προεπιλογή, αυτό είναι το δεύτερο και το τέταρτο:
<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('Checked: ' + n);
};
countChecked();
$('input[type=checkbox]').on('click', countChecked);
Παράδειγμα
Ας με κλικ να εμφανίζουμε στο κάτω μέρος την τιμή κάθε επιλεγμένου διακόπτη radio:
<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() + ' is checked!');
});
