How to Get and Set Data Attribute Value in jQuery

How to Get and Set Data Attribute Value in jQuery

To get and set data attribute values in jQuery; In this tutorial, you will learn how to get and set data attribute value in jquery using attr() method.

jQuery attr() Method

The jQuery attr() method is used to get or set attributes and values of the selected html elements.

Syntax of 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

ParameterDescription
AttributeUsing this parameter to specify the name of the attribute.
ValueUsing 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 – how to get data attribute value in jquery

The following example will show you how to get the data-attribute value on click the html elements.

<!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>                            

Output

Get Data Attribute Values

Please select your gender :

In this above example jquery get Attr() method, You can use the jQuery attr() method to get the data-gender attribute of selected HTML element.

Example – how to get data attribute value in jquery

The following example will show you how to Set the data-attribute value on click the html elements.

<!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.tutsmake.com/jquery/");
      });
    });
</script>
</head>
<body>
    <h3>Below link changed when you click on button</h3>
    <p><a href="https://www.tutsmake.com" id="link">Tutsmake.com</a></p>
    <button type="button" class="btn_click_attr" style="margin-top: 10px;">Click here to Set Data Attribu Values</button>
</body>
</html>                            

Output

jQuery Set Data Attribute Values

Below link changed when you click on button

Tutsmake.com

In the above example jquery set Attr() method, You can use the jQuery attr() method to set the href link value attribute of selected HTML element.

If you want to get data attribute value in HTML, you can use jquery .data(‘attribute’) method, .attr(‘attribute full name’) method to get data attribute value by class, id, name, selected option elements in jQuery.

Recommended jQuery Tutorial

  1. jQuery Remove Attribute and Disabled Attribute From Element
  2. jQuery | Event MouseUp By Example
  3. Event jQuery Mouseleave By Example
  4. jQuery Event Mouseenter Example
  5. Event jQuery MouseOver & MouseOut By Example
  6. keyup jquery event example
  7. Jquery Click Event Method with E.g.
  8. Event jQuery. Blur By Example
  9. jQuery form submit event with example
  10. keydown function jQuery
  11. List of jQuery Events Handling Methods with examples
  12. Jquery Selector by .class | name | #id | Elements
  13. How to Get the Current Page URL in jQuery
  14. jQuery Ajax Get() Method Example
  15. get radio button checked value jquery by id, name, class
  16. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  17. jQuery Get Data Text, Id, Attribute Value By Example
  18. Set data attribute value jquery
  19. select multiple class in jquery
  20. How to Remove Attribute Of Html Elements In jQuery
  21. How to Checked Unchecked Checkbox Using jQuery
  22. jQuery removeClass & addClass On Button Click By E.g.
  23. To Remove whitespace From String using jQuery
  24. jQuery Ajax Post Method Example
  25. jQuery Ajax Get Method Example
  26. To Load/Render html Page in div Using jQuery Ajax $.load
  27. jQuery Sibling Methods – To Find Siblings Elements
  28. jQuery Find Siblings Elements with Class, id

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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