How to set attribute without value using jQuery ?

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 :
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <title>
          Setting attribute without value
        </title>
        <style>
            div {
                color: blue;
            }
        </style>
        <script src=
        </script>
    </head>
      
    <body>
      
        <p>
          Let us learn about 
          <b title="jQuery, attr() ">method</b
          for setting attributes.
        </p>
      
        To set the value of attibute, use :
        <div></div>
      
        <script>
            var title = $("b").attr("title");
            $("div").text(title);
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

  • 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 :
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
      
        <script src=
        </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>

    chevron_right

    
    

  • Output :
  • Example 2:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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=
        </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() {
                var $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>

    chevron_right

    
    

  • Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.