Several older implementations for handling select boxes use outdated JavaScript and jQuery practices. In this updated guide, you’ll learn how to select and deselect all options in an HTML select box using modern jQuery.
This approach works smoothly with current browsers and is ideal for bulk actions like delete, edit, or update records.
Why Is Select and Deselect All Functionality Important?
Many applications allow users to work with multiple records at once. Selecting options one by one can slow users down.
This feature helps to:
- Improve user experience
- Speed up bulk operations
- Reduce repetitive clicks
- Keep UI interactions simple
How Does Select and Deselect All Work Today?
The modern approach relies on:
- The HTML
multipleselect attribute - Updated jQuery (v3.x)
- The
.prop()method instead of deprecated patterns
What Happens Internally?
- Clicking Select All sets
selected = truefor every option - Clicking Deselect All resets
selected = false
Step 1: How Do You Create a Multiple Select Box in HTML?
Start by creating a select box that allows multiple selections.
Key Points to Remember
- Improve user experience
- Speed up bulk operations
- Reduce repetitive clicks
- Keep UI interactions simple
File Name: select-option.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select & Deselect All Options</title>
<!-- Latest jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<select id="selectBox" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
</select>
<br><br>
<button type="button" id="selectAll">Select All</button>
<button type="button" id="deselectAll">Deselect All</button>
<!-- Custom JS -->
<script src="custom.js"></script>
</body>
</html>
Step 2: What Is the Best Way to Select and Deselect Options Using jQuery?
Modern jQuery recommends using .prop() for boolean states such as selected.
Why Use .prop() Instead of .attr()?
.prop()correctly handles live DOM states.attr()is outdated for boolean properties.prop()works reliably across modern browsers
File Name: custom.js
$(document).ready(function () {
// Select all options
$('#selectAll').on('click', function () {
$('#selectBox option').prop('selected', true);
});
// Deselect all options
$('#deselectAll').on('click', function () {
$('#selectBox option').prop('selected', false);
});
});
What Are the Benefits of This Updated Approach?
Using this modern implementation gives you:
- Compatibility with the latest jQuery versions
- Cleaner and readable code
- Better browser consistency
- Easier future maintenance.
Can This Work With Dynamic Data?
Yes.
This logic works perfectly with:
- Options loaded via AJAX
- Server-side rendered options
- Data fetched from APIs or databases
No code changes are required.
Summary
In this updated tutorial, we learned how to select and deselect all options in a select box using modern jQuery best practices.
This feature is essential for applications that support bulk actions and improves both usability and performance.
If you have questions or want an advanced version (pure JavaScript, checkbox-based select all, or dynamic data), feel free to ask
Also, You can read our other blog post
Be the first to comment.