How to use the attr method In JQuery

Using the prop method

It is similar to the above method and more suitable for older jQuery versions. The input can be accessed and its property can be set by using the attr() method. We have to manipulate the ‘checked’ attribute and set it to true or false depending on whether we want to check or uncheck it.

Syntax:

$("element").attr("checked", true)

Example: The below code example implements the attr() method to check the checkbox.

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"
                   name="option"
                   id="Front"> 
            Front-End 
 
            <input
                   type="checkbox"
                   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() { 
                    $("#Front").attr("checked", true); 
 
                }); 
                $(".check-Back").click(function() { 
                    $("#Back").attr("checked", true); 
                }); 
                $(".reset").click(function() { 
                    $("#Front").attr("checked", false); 
                    $("#Back").attr("checked", false); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
 
</html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

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

Tags:

#jQuery-Misc #JavaScript #JQuery #Web Technologies

Using the prop method

How to use the attr method In JQuery

Syntax:

html

How to check a checkbox with jQuery?

Similar Reads