Complex Form Inputs
In this page:
Checkbox Groups
A group of checkboxes sharing the same name lets a user tick any combination of options, and jQuery can collect all the checked ones at once using a selector like input[name=x]:checked. This is the standard pattern for 'select all that apply' style questions.
Example: Checkbox Groups
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="fruit" value="apple" checked>
<input type="checkbox" name="fruit" value="banana" checked>
<input type="checkbox" name="fruit" value="cherry">
<script>
const checked = $("input[name=fruit]:checked").map(function() { return this.value; }).get();
console.log(checked);
</script>
</body>
</html>Radio Buttons
Radio buttons sharing the same name allow only one choice from the group, since selecting one automatically deselects the others. jQuery can read the checked value with a selector like input[name=x]:checked, similar to checkboxes but always returning at most one match.
Example: Radio Buttons
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="radio" name="size" value="S">
<input type="radio" name="size" value="M" checked>
<script>
console.log($("input[name=size]:checked").val());
</script>
</body>
</html>Select Menus
Select menus provide one choice from a dropdown list by default, and jQuery's val() method reads or sets which option is currently selected. Reading it is simpler than checkboxes or radios since there's only ever a single current value.
Example: Select Menus
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select id="color"><option>Red</option><option selected>Blue</option></select>
<script>
console.log($("#color").val());
</script>
</body>
</html>Multiple Selects
A select with the multiple attribute can have several selected values at once, and calling val() on it returns an array of all the selected options' values instead of a single string. This differs from a normal select, where val() always returns just one value.
Example: Multiple Selects
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<select id="colors" multiple><option selected>Red</option><option selected>Blue</option><option>Green</option></select>
<script>
console.log($("#colors").val());
</script>
</body>
</html>Practical Inputs
Different form controls -- checkboxes, radios, and selects -- can be handled together in the same form, each read with the technique suited to how many values it can hold. Knowing which pattern applies to which control type avoids bugs like assuming val() always returns a single value.
Example: Practical Inputs
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="opt" value="a" checked>
<select id="color"><option selected>Blue</option></select>
<script>
console.log($("input[name=opt]:checked").val(), $("#color").val());
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: