Selector checked
El selector :checked selecciona elementos
que están marcados, es decir, aquellos que tienen los atributos
checked o
selected.
El selector :checked funciona con casillas de verificación
(checkbox) y
botones de opción
(radio),
así como para elementos con la etiqueta
option.
Para obtener solo las opciones seleccionadas de elementos
select,
utilice el selector
selected.
Sintaxis
Así seleccionamos elementos con el
atributo checked:
$(':checked');
Ejemplo
Vamos, cada vez que se seleccione una casilla de verificación, a mostrar el número de casillas de verificación marcadas. Como puede ver, antes de su primer clic se mostrarán las casillas de verificación seleccionadas por defecto, que son la segunda y la cuarta:
<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);
Ejemplo
Vamos a mostrar al hacer clic el valor de cada botón de opción seleccionado en la parte inferior:
<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!');
});
