How to set attribute without value using jQuery ?

Last Updated : 08 Aug, 2024

There are many ways to set attributes without value using jQuery. jQuery prop() method is used to get or set the values of attributes. To change the properties like checked, default checked, disabled, selectedIndex, default selected and selected state of Document Object Model, use the jQuery .prop() method. Also, we can use the attr() method to do that. Below both, the methods are described with the help of examples.

Method 1: You can use the jQuery attr() method which a function for setting attributes for set of matching elements and then pass an empty string. It will be equivalent to setting attribute without value.

Syntax :

.attr(attribute-name, value to be passed)

Example 1 :

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        Setting attribute without value
    </title>
    <style>
        div {
            color: blue;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js">
    </script>
</head>

<body>

    <p>
        Let us learn about
        <b title="jQuery, attr() ">method</b>
        for setting attributes.
    </p>

    To set the value of attribute, use :
    <div></div>

    <script>
        let title = $("b").attr("title");
        $("div").text(title);
    </script>

</body>

</html>

Output:

Method 2: This is done by using jQuery prop() method which is used to develop name only attributes.

Syntax:

prop(para1, para2)

Example 1 :

html

<!DOCTYPE html>
<html>

<head>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {

            $('#btnDiv').click(function () {
                var content = $('.active').attr('class');
                $("#showDivContent").text(content);
            });

            $('#btnPara').click(function () {
                var style = $('p').prop('style');
                var styleName = style.fontWeight
                $("#showParastyle").text(styleName);
            });

        });
    </script>
    <style>
        body {
            width: 450px;
            height: 300px;
            margin: 10px;
            float: left;
        }

        .active {
            background-color: yellow;
            margin: 5px 0 0 0;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <b>
        Setting attributes without value using jQuery
    </b>
    <br>
    <br>
    <button id="btnDiv">
        Get div class name
    </button>
    <button id="btnPara">
        Get paragraph style
    </button>

    <div id="showDivContent" class="active">
        This is div.
    </div>
    <p id="showParastyle" style="font-size:16px;
              font-weight:bold;">
        This is paragraph.
    </p>

    <div class="active">
        This is div.
    </div>

</body>

</html>

Output :

Example 2:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>
        Setting attributes without
        values using jQuery
    </title>

    <style>
        p {
            margin: 20px 0 0;
        }

        b {
            color: blue;
        }
    </style>

    <script src=
"https://code.jquery.com/jquery-3.4.1.js">
    </script>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <label for="checkboxId">
        Check me
    </label>

    <input id="checkboxId" type="checkbox" checked="checked">


    <p></p>


    <script>
        $("input").change(function () {
            let $input = $(this);
            $("p").html(".attr( 'checked' ): <b>"
                + $input.attr("checked") + "</b><br>"
                + ".prop( 'checked' ): <b>"
                + $input.prop("checked") + "</b><br>"
                + ".is( ':checked' ): <b>"
                + $input.is(":checked") + "</b>");
        }).change();
    </script>
</body>

</html>

Output:

jQuery [attribute*=value] Selector

geetanjali16

Improve

Article Tags :

How to set attribute without value using jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?