Stay Tuned!

Subscribe to our newsletter to get our newest articles instantly!


How to Check a Checkbox in jQuery by Value

Manipulating checkboxes dynamically using jQuery is a common requirement in web development. Sometimes, you may need to check a checkbox based on its value through jQuery. Let’s explore the steps to achieve this functionality.

HTML Structure

Consider having a set of checkboxes with different values in your HTML:

<input type="checkbox" class="checkbox" value="option1"> Option 1
<input type="checkbox" class="checkbox" value="option2"> Option 2
<input type="checkbox" class="checkbox" value="option3"> Option 3

Using jQuery to Check a Checkbox by Value

1. Identifying the Checkbox by Value

In jQuery, you can identify the checkbox by its value and then set the checked property to true to check it:

// Check a checkbox based on its value
const valueToCheck = 'option2'; // Replace with the desired checkbox value

$('.checkbox').each(function() {
  if ($(this).val() === valueToCheck) {
    $(this).prop('checked', true); // Check the checkbox if the value matches

2. Explanation

  • The jQuery selector $('.checkbox') selects all checkboxes with the class .checkbox.
  • The .each() function iterates through each checkbox element.
  • Inside the loop, $(this).val() retrieves the value of the current checkbox being iterated.
  • If the value matches valueToCheck, $(this).prop('checked', true) sets the checked property of that checkbox to true, checking it in the UI.

3. Triggering the Code

You can execute this code on a specific event (e.g., button click, page load) or when needed in your application’s logic.


Using jQuery, you can dynamically check checkboxes based on their values by selecting the checkboxes, iterating through them, and setting the checked property for the desired checkbox with a matching value.

This functionality proves useful when you need to pre-select checkboxes based on specific criteria or user selections, enhancing the user experience and providing a more intuitive interface.

Experiment with different scenarios and incorporate this technique into your web applications where dynamically checking checkboxes by value is required.

Happy coding with jQuery and dynamic checkbox manipulation! 🌟✨



About Author

Leave a comment

Your email address will not be published. Required fields are marked *

You may also like


How to check window scroll position with JQuery

In web development, monitoring the window scroll position is crucial for implementing various interactive and dynamic features on a webpage.

How to get checked checkbox value by id in JQuery

There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in that some injected