Categories
28°C, New York
Home JQuery By using checked property directly

By using checked property directly

Using the prop method

In this method, we will select the element using the element selector and directly use the checked property on the item that is present at the passed index of the selected elements, and set its value to true.

Syntax:

$('element_selector')[index].checked = true;

Example: The below example will explain the use of the checked property to check the checkbox using jQuery.

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        How to check a checkbox with jQuery?
    </title>
 
    <script src=
"https://code.jquery.com/jquery-2.2.4.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green">
        w3wiki
        </h1>
 
        <b>
        jQuery Check/Uncheck Checkbox
        </b>
 
        <p>
            <input
                   type="checkbox"
                   class="checkboxes"
                   name="option"
                   id="front">
            Front-End
 
            <input
                   type="checkbox"
                   class="checkboxes"
                   name="option"
                   id="back">
            Back-End
        </p>
 
        <p>
            <button
                    type="button"
                    class="check-front">
                Subscribe Front-End
            </button>
 
            <button
                    type="button"
                    class="check-back">
                Subscribe Back-End
            </button>
 
            <button
                    type="button"
                    class="reset">
                Reset
            </button>
        </p>
 
        <script type="text/javascript">
            $(document).ready(function() {
                $(".check-front").click(function() {
                    $(".checkboxes")[0].checked = true;
                });
                $(".check-back").click(function() {
                    $(".checkboxes")[1].checked = true; 
                });
                $(".reset").click(function() {
                    $(".checkboxes")[0].checked = false; 
                    $(".checkboxes")[1].checked = false;
                });
 
            });
        </script>
    </center>
</body>
 
</html>
 






                        









													
													
												

												
												

													
													
Output:

													
													
												

												
											

											
											

												
How to check a checkbox with jQuery?

												
												

													
													
In this article, we will learn about the different methods to dynamically check a checkbox using jQuery. There are three methods by which you can dynamically check the currently selected checkbox by changing the checked property of the input type.  

													
													
												

												
												

													
													


Table of Content


    

  • By using checked property directly
    • 

  • Using the prop method
    • 

  • Using the attr method
    • 




													
													
												

												
											

										


										
										

											
Similar Reads

											
											

												
													

														By using checked property directly

													

														In this method, we will select the element using the element selector and directly use the checked property on the item that is present at the passed index of the selected elements, and set its value to true....
													

												
											

											
											

												
													

														Using the prop method

													

														...
													

												
											

											
											

												
													

														Using the attr method

													

														The input can be accessed and its property can be set by using the prop() method. This method manipulates the ‘checked’ property and sets it to true or false depending on whether we want to check or uncheck it....
													

												
											

											
										


									

									

										
Tags:

										
										#jQuery-Misc
										
										#JavaScript
										
										#JQuery
										
										#Web Technologies
										

									

									

										

											
										

										

											
											
												Using the prop method