:checked1.0
Соответствует всем выбранным элементам формы. Это могут быть выбранные флажки (checkbox), переключатели (radio) или элементы списка (select). Если нужны именно выбранные элементы списка (select), то лучше воспользоваться селектором :selected.
Примеры использования:
$('.formBox input:checked')
| вернет все выбранные элементы формы с классом formBox.
|
В действии
Пример 1
Организуем вывод выделенного фрукта:
~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
~lt~meta charset="utf-8"~gt~
~lt~title~gt~checked demo~lt~/title~gt~
~lt~script src="/p2p/jquery-1.7.2.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
input, label {
line-height: 1.5em;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~form~gt~
~lt~div~gt~
~lt~input type="radio" name="fruit" value="Апельсин" id="orange"~gt~
~lt~label for="orange"~gt~Апельсин~lt~/label~gt~
~lt~/div~gt~
~lt~div~gt~
~lt~input type="radio" name="fruit" value="Яблоко" id="apple"~gt~
~lt~label for="apple"~gt~Яблоко~lt~/label~gt~
~lt~/div~gt~
~lt~div~gt~
~lt~input type="radio" name="fruit" value="Банан" id="banana"~gt~
~lt~label for="banana"~gt~Банан~lt~/label~gt~
~lt~/div~gt~
~lt~div id="log"~gt~~lt~/div~gt~
~lt~/form~gt~
~lt~script~gt~
$( 'input' ).on( 'click', function() {
$( '#log' ).html( 'Был выбран ' + $( 'input:checked' ).val() );
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Пример 2
Будем считать количество выбранных флажков:
~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
~lt~meta charset="utf-8"~gt~
~lt~title~gt~checked demo~lt~/title~gt~
~lt~script src="/p2p/jquery-1.7.2.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
div {
color: red;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~form~gt~
~lt~p~gt~
~lt~input type="checkbox" name="newsletter" value="Hourly" checked="checked"~gt~
~lt~input type="checkbox" name="newsletter" value="Daily"~gt~
~lt~input type="checkbox" name="newsletter" value="Weekly"~gt~
~lt~input type="checkbox" name="newsletter" value="Monthly" checked~gt~
~lt~input type="checkbox" name="newsletter" value="Yearly"~gt~
~lt~/p~gt~
~lt~/form~gt~
~lt~div~gt~~lt~/div~gt~
~lt~script~gt~
var countChecked = function() {
var n = $( 'input:checked' ).length;
$( 'div' ).text( n + ' выбрано!' );
};
countChecked();
$( 'input[type=checkbox]' ).on( 'click', countChecked );
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки