Get and Set Data Attribute Value in jQuery

To get and set data attribute value in jQuery; Through this tutorial, i am going to show you how to set and get data attribute value in jQuery of html elements.

The jQuery attr() method is used to get or set attribute and value of the selected html element.

How to Set and Get Data Attribute Value in jQuery

Syntax jQuery attr() method
Parameters of jQuery attr() method
Example 1 – How to Get Data Attribute Value in jQuery
Example 2 – How to set Data Attribute Value in jQuery

Syntax jQuery attr() method

For get an attribute’s value use the below syntax

$(selector).attr(attribute);

Using the below syntax you can set an attribute and values.

$(selector).attr(attribute,value);

To set an attribute and value by using a function using this below syntax.

$(selector).attr(attribute,function(index,currentvalue)) ;

To set multiple attributes and values using this below syntax.

$(selector).attr({attribute:value, attribute:value,...})

Parameters of jQuery attr() method

Parameter	Description
Attribute	Using this parameter to specify the name of the attribute.
Value	Using this parameter to specify the value of the attribute.
Function (index, currentvalue)	Using this parameter to specify a function that returns an attribute value to set. Index: This is used to receive the index position of the element in the set. Currentvalue: This is used to provide the current attribute value of selected elements.

Example 1 – How to Get Data Attribute Value in jQuery

See the following example to get the data attribute value on click of html elements using jQuery attr() method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Data Attribute Values</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn_click").click(function(){
            var gen = $(this).attr("data-gender");
            alert("You are selected : " + gen);
        });
    });
</script>
</head>
<body>
        <h3>Please select your gender :</h3>
        <label><input type="radio" name="gender" class="btn_click" data-gender="Male"> Male</label>
        <label><input type="radio" name="gender" class="btn_click" data-gender="Female"> Female</label>
</body>
</html>

Example 2 – How to set Data Attribute Value in jQuery

See the following example to set the data-attribute value on click of html elements using jQuery attr() method:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set Data Attribute Values</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>
    $(document).ready(function(){
      $(".btn_click_attr").click(function(){
        $("#link").attr("href", "https://www.Laratutorials.com/jquery/");
      });
    });
</script>
</head>
<body>
    <h3>Below link changed when you click on button</h3>
    <p><a href="https://www.Laratutorials.com" id="link">Laratutorials.com</a></p>
    <button type="button" class="btn_click_attr" style="margin-top: 10px;">Click here to Set Data Attribu Values</button>
</body>
</html>