jQuery Radio Buttons and Checkboxes — Complete Selection Management Guide

In this tutorial, you will learn about jquery radio buttons and checkboxes. We cover key concepts, practical examples, and best practices to help you master this topic.

jQuery radio buttons and checkbox manipulation handles user selection with .prop('checked'), change events, and value collection methods for forms, filters, and interactive controls.

What You'll Learn

• Getting and setting checked state with .prop()
• Reading selected values from radio groups
• Managing checkbox lists (select all, toggle)
• Handling change events for selection logic
• Working with indeterminate state

Why It Matters

Radio buttons and checkboxes are everywhere in web forms — surveys, filters, preferences, settings. jQuery provides consistent cross-browser methods to check state, respond to changes, and collect values.

Real-World Use

A product filter sidebar with category checkboxes (select all/none), price range radio buttons, and a "Show results" button that reads all selected filters and updates the product grid via AJAX.

Selection Flow

flowchart LR
    A[User Clicks] --> B[.prop('checked') updated]
    B --> C[change Event Fires]
    C --> D[Read All Selections]
    D --> E[Update UI / Submit]
    style B fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px

Checking and Unchecking

// Check a checkbox
$('#agree-terms').prop('checked', true);

// Uncheck
$('#agree-terms').prop('checked', false);

// Select a radio button
$('input[name="gender"][value="female"]').prop('checked', true);

// Read checked state
var isChecked = $('#agree-terms').prop('checked');
console.log('Checked:', isChecked); // Output: true or false

// Using .is(':checked')
if ($('#agree-terms').is(':checked')) {
  console.log('User agreed');
}

Expected output: .prop('checked', true) checks the element. .prop('checked', false) unchecks it. Reading .prop('checked') returns a boolean.

Getting Selected Values

// Single radio group value
var gender = $('input[name="gender"]:checked').val();
console.log('Selected gender:', gender);

// All checked checkboxes
var interests = [];
$('input[name="interests"]:checked').each(function() {
  interests.push($(this).val());
});
console.log('Selected interests:', interests);

// Using $.map
var selected = $.map(
  $('input[name="options"]:checked'),
  function(el) { return el.value; }
);

Select All / Deselect All

$('#select-all').on('change', function() {
  var isChecked = $(this).prop('checked');

  // Check or uncheck all items
  $('.item-checkbox').prop('checked', isChecked);

  // Update count
  updateSelectedCount();
});

$('.item-checkbox').on('change', function() {
  // Update "select all" state
  var total = $('.item-checkbox').length;
  var checked = $('.item-checkbox:checked').length;

  $('#select-all').prop('checked', total === checked);
  $('#select-all').prop('indeterminate', checked > 0 && checked < total);

  updateSelectedCount();
});

function updateSelectedCount() {
  var count = $('.item-checkbox:checked').length;
  $('#selected-count').text(count + ' selected');
}

Expected output: Clicking "Select All" checks all item checkboxes. If some items are checked, the "Select All" checkbox shows indeterminate state. The count updates in real-time.

Radio Button Change Events

$('input[name="shipping"]').on('change', function() {
  var selectedMethod = $(this).val();

  // Update price display
  var price = getShippingPrice(selectedMethod);
  $('#shipping-cost').text('$' + price.toFixed(2));

  // Show/hide additional fields
  if (selectedMethod === 'express') {
    $('#express-options').slideDown();
  } else {
    $('#express-options').slideUp();
  }
});

Checkbox Change Events

// Toggle visibility of sections
$('input[name="showSection"]').on('change', function() {
  var section = $(this).data('section');
  if ($(this).prop('checked')) {
    $('#' + section).slideDown();
  } else {
    $('#' + section).slideUp();
  }
});

// Enable/disable dependent fields
$('#has-spouse').on('change', function() {
  var isChecked = $(this).prop('checked');
  $('#spouse-name').prop('disabled', !isChecked);
  $('#spouse-income').prop('disabled', !isChecked);
});

Toggle All with Shift+Click

var lastChecked = null;

$('.item-checkbox').on('click', function(e) {
  if (!lastChecked) {
    lastChecked = this;
    return;
  }

  if (e.shiftKey) {
    var start = $('.item-checkbox').index(this);
    var end = $('.item-checkbox').index(lastChecked);

    var range = start < end ?
      $('.item-checkbox').slice(start, end + 1) :
      $('.item-checkbox').slice(end, start + 1);

    range.prop('checked', lastChecked.checked);
  }

  lastChecked = this;
});

Indeterminate State

// Set indeterminate (visual only, not a true checked state)
$('#select-all').prop('indeterminate', true);

// Useful for "some selected but not all" state
function updateSelectAllState() {
  var total = $('.item').length;
  var checked = $('.item:checked').length;
  var $selectAll = $('#select-all');

  if (checked === 0) {
    $selectAll.prop('checked', false);
    $selectAll.prop('indeterminate', false);
  } else if (checked === total) {
    $selectAll.prop('checked', true);
    $selectAll.prop('indeterminate', false);
  } else {
    $selectAll.prop('checked', false);
    $selectAll.prop('indeterminate', true);
  }
}

Working with Button-Like Checkboxes

// Style checkboxes as toggle buttons
$('.toggle-btn').on('click', function() {
  var $btn = $(this);
  var $checkbox = $btn.find('input[type="checkbox"]');

  // Toggle checked
  $checkbox.prop('checked', !$checkbox.prop('checked'));

  // Update appearance
  $btn.toggleClass('active', $checkbox.prop('checked'));
});

// CSS: .toggle-btn.active { background: #3498db; color: white; }

Common Mistakes

1. Using .attr('checked') instead of .prop('checked') - .attr('checked') returns the string 'checked' or undefined, not a boolean. Always use .prop('checked') for boolean states.

2. Forgetting that radio buttons with the same name auto-exclude - Setting one radio button's checked to true automatically unchecks others in the same group. You do not need to manually uncheck siblings.

3. Not using .trigger('change') after programmatic changes - .prop('checked', true) changes the state but does NOT fire the change event. Call .trigger('change') if event handlers need to run.

4. Assuming :checked works with .val() on checkboxes - .val() returns the value attribute of the first matched element, whether checked or not. Use :checked filter to get only selected checkboxes.

5. Overlooking indeterminate state - Checkboxes have three visual states: checked, unchecked, and indeterminate (used for parent checkboxes when some children are selected).

Practice Questions

1. How do you check whether a checkbox is checked?
2. How do you get the value of the selected radio button in a group?
3. How do you programmatically trigger a change event after setting .prop('checked')?
4. What is the indeterminate state of a checkbox?
5. How do you implement "Select All" / "Deselect All" functionality?

Challenge: Build a permission matrix with role checkboxes (Admin, Editor, Viewer) and individual permission checkboxes (Read, Write, Delete, Export). Implement "Select All" per role, and show a summary of selected permissions.

FAQ

{{< faq "How do I clear all radio buttons in a group?" "Set all to checked=false: $('input[name="group"]').prop('checked', false). This leaves the group with no selection." >}}

{{< faq "How do I get the text label of a selected radio button?" "Find the associated label: $('label[for="' + this.id + '"]').text() or wrap the radio in a label and use .closest('label').text()." >}}

Mini Project

Build a flight search filter with checkboxes for airlines, radio buttons for cabin class (Economy, Business, First), checkboxes for stop count (Non-stop, 1 Stop, 2+ Stops), and a price range. Display a summary of active filters and update results on any change.

What's Next

Selection controls gather user choices. Learn how jQuery scrolling methods help users navigate through content and results.