jQuery / Selector / :checked — Seleccionar casillas y botones de radio marcados
jQuery :checked coincide con casillas y radios marcados, además de opciones seleccionadas. Limite tipo y ámbito, como input[type="checkbox"]:checked. Use map para varios valores y lea radios desde el elemento marcado de su grupo name.
Estado marcado y valor son distintos
La referencia :checked incluye option, por lo que el total del formulario no tiene por qué contar casillas. El ejemplo separa channels y plan; Priority añade una opción al total.
.val() lee el value configurado aunque no esté marcado: SMS sin marcar devuelve sms. .prop("checked") consulta uno, .is(":checked") si cualquiera coincide y .filter(":checked") la colección coincidente. Un getter de propiedad sobre varios solo lee el primero.
Radios con el mismo name en el mismo formulario son exclusivos. Limite formulario y nombre. Sin elección, la colección marcada queda vacía y .val() puede ser undefined.
Ejemplo completo comparativo
Guarde y abra checked-demo.html en UTF-8. Internet carga jQuery completo 4.0.0, sin servidor ni compilación. Windows Edge con 4.0.0 y 3.7.1 comprobó teclado, arrays, deshabilitados, change dinámico y Reset. No se envía al servidor.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Checked controls and form data</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 20px; }
fieldset { margin: 12px 0; }
label { display: block; }
button, select { font: inherit; max-width: 100%; margin: 4px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<form id="preferences">
<fieldset id="channels"><legend>Channels</legend>
<label><input id="email" type="checkbox" name="channels" value="email" checked>Email</label>
<label><input id="sms" type="checkbox" name="channels" value="sms">SMS</label>
<label><input type="checkbox" name="channels" value="archive" checked disabled>Archive (disabled)</label>
<fieldset disabled><legend>Unavailable</legend>
<label><input type="checkbox" name="channels" value="legacy" checked>Legacy</label>
</fieldset>
</fieldset>
<fieldset><legend>Plan</legend>
<label><input id="basic" type="radio" name="plan" value="basic" checked>Basic</label>
<label><input id="pro" type="radio" name="plan" value="pro">Pro</label>
</fieldset>
<label for="priority">Priority</label>
<select id="priority" name="priority"><option value="normal">Normal</option><option value="high">High</option></select>
<button type="button" id="choose">Choose SMS and Pro</button>
<button type="button" id="clear">Clear enabled channels</button>
<button type="button" id="restore">Reset</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
jQuery(function ($) {
const $form = $("#preferences"), form = $form[0];
let changes = 0;
function boxes() { return $form.find('input[type="checkbox"][name="channels"]'); }
function values($elements) { return $elements.map(function () { return this.value; }).get(); }
function render() {
const $checked = boxes().filter(":checked"), data = new FormData(form);
$("#result").text("checkedBoxes=" + JSON.stringify(values($checked)) +
"\nenabledBoxes=" + JSON.stringify(values($checked.filter(":enabled"))) +
"\nradio=" + ($form.find('input[name="plan"]:checked').val() || "(none)") +
"\ncheckedAttributes=" + JSON.stringify(values(boxes().filter("[checked]"))) +
"\nsubmittedChannels=" + JSON.stringify(data.getAll("channels")) +
"\nform=" + new URLSearchParams(data).toString() +
"\nglobalChecked=" + $form.find(":checked").length + "\nchanges=" + changes);
}
$form.on("change", "input, select", function () { changes++; render(); });
$("#choose").on("click", function () {
boxes().filter(":enabled").prop("checked", false);
$("#sms").prop("checked", true).trigger("change");
$("#pro").prop("checked", true).trigger("change");
});
$("#clear").on("click", function () { boxes().filter(":enabled").prop("checked", false).trigger("change"); });
$("#restore").on("click", function () { form.reset(); changes = 0; render(); });
render();
});
</script>
</body>
</html>Hay tres channels marcados inicialmente, pero solo Email puede enviarse. globalChecked vale cinco incluyendo radio y opción.
checkedBoxes=["email","archive","legacy"]
enabledBoxes=["email"]
radio=basic
checkedAttributes=["email","archive","legacy"]
submittedChannels=["email"]
form=channels=email&plan=basic&priority=normal
globalChecked=5
changes=0- Marque SMS con clic o Espacio: submittedChannels pasa a ["email","sms"] con el mismo nombre repetido.
- Pro desmarca Basic y produce radio=pro, también con flechas mediante change.
- Reset y Choose SMS and Pro deja solo SMS entre activos, con Archive/Legacy deshabilitados; radio=pro, changes=2.
- checkedAttributes conserva email/archive/legacy iniciales.
- Clear enabled channels vacía enabledBoxes y submittedChannels manteniendo los deshabilitados.
- Reset restaura casillas, radio, Priority y contador.
checkedBoxes contiene valores marcados, enabledBoxes los filtrados por :enabled y submittedChannels el FormData.getAll real. changes cuenta manejadores, varios si varios elementos emiten; no es cantidad de clics.
Atributo, propiedad y actualización
[checked] consulta el atributo HTML; la propiedad DOM checked y :checked describen el presente. El predeterminado se relaciona con defaultChecked y puede quedar tras desmarcar. No use [checked] ni la verdad de .attr("checked") para el estado actual.
.prop("checked", true o false) cambia sin emitir change. El ejemplo lo dispara explícitamente y renderiza al inicio. Si el informe no cambia tras asignar, revise eventos y render.
change se delega desde el formulario persistente a input/select. Los controles añadidos pueden propagar hasta el manejador y render vuelve a buscar casillas cada vez. Una colección :checked guardada no actualiza automáticamente sus miembros.
Reset usa form.reset() y render. El id restore evita ocultar el método. Cambiar atributos iniciales o valores predeterminados de nuevos controles cambia también el resultado del reinicio.
Deshabilitados y varios valores enviados
Una casilla disabled, incluso bajo fieldset deshabilitado, puede seguir marcada. :checked no demuestra que pueda enviarse. :enabled considera herencia; FormData omite Archive/Legacy. Mirar solo la ausencia de [disabled] omite esos descendientes.
Casillas y radios sin marcar suelen faltar en los datos, sin cadena false automática. Sin value, una casilla vale on. Use identificadores significativos y defina en servidor cómo tratar ausencias.
FormData.getAll() conserva nombres repetidos. Object.fromEntries con una clave puede perder valores. Compruebe convenciones de arrays del framework y valide valores y combinaciones en el servidor.
:checked funciona también en querySelectorAll nativo. Para opciones, limite a option:checked o jQuery :selected. Al decorar, conserve estado real del input y asociación label para que color y selección coincidan.
