Found 10711 Articles for Web Development

How to write a jQuery selector for the label of a checkbox?

Amit D
Updated on 09-Dec-2019 06:16:03

2K+ Views

To write a jQuery selector for the label of a checkbox, use the for attribute of label element.ExampleYou can try to run the following code to learn how to write a jQuery selector for the label of a checkbox:Live Demo $(document).ready(function(){    $("label[for='mysubjects1']").css("background-color", "yellow");    $("label[for='mysubjects2']").css("background-color", "gray"); });     Subjects     New Subjects

How to use jQuery selectors on custom data attributes using HTML5?

Amit D
Updated on 18-Dec-2019 08:16:25

250 Views

To use jQuery selectors on custom data attributes, you can use contains, starts with, and ends with for the HTML data attributes.ExampleOther than that, you can try to run the following code to learn how to use jQuery selectors on custom data attributes using HTML5:Live Demo $(document).ready(function(){   //stored selector   var group = $('ol[data-group="Subjects"]');   // starts with M   var maths = $('[data-subject^="M"]',group).css('color','green');   // contains the string graph   var graph = $('[data-subject*="graph"]',group).css('color','blue'); });   Maths   Science   Geography   History

How to use wildcards like $ ('#name*'), $ ('#name%') in jQuery selectors?

Amit D
Updated on 13-Jun-2020 12:27:36

3K+ Views

For getting the id that begins or ends with a particular string in jQuery selectors, you shouldn’t use the wildcards $('#name*'), $('#name%'). Instead use the characters ^and $. The ^ is used is used to get all elements starting with a particular string. The $ is used is used to get all elements ending with a particular string.ExampleYou can try to run the following code to learn how to get id beginning and endingwith a particular string.Live Demo $(document).ready(function(){   $("[id$=new1]").css("background-color", "yellow");   $("[id^=myid]").css("background-color", "green"); }); Java HTML Ruby C++

How to use jQuery selector for the elements with an ID that ends with a given string?

Amit D
Updated on 18-Dec-2019 08:15:42

1K+ Views

To get the elements with an ID that ends with a given string, use attribute selector with $ character.ExampleYou can try to run the following code to learn how to to use jQuery selector for the elements with an ID that ends with a given string. Let’s say we are going for elements with an ID ending with the string “new1”.Live Demo $(document).ready(function(){   $("[id$=new]").css("background-color", "yellow");     }); Java HTML Ruby

How to get the children of $(this) selector?

David Meador
Updated on 18-Dec-2019 08:28:37

71 Views

To get the children of the $(this) selector in jQuery, use the find() method with each() method. Let us first see how to add jQuery:ExampleYou can try to run the following code to get the children of the $(this) selector:Live Demo           jQuery Example                      // Set the click handler on your div          $("body").off("click", "#mydiv").on("click", "#mydiv", function() {                      // Find the image using.find() and .each()            $(this).find("img").each(function() {                         var img = this;                      });          });                                #mydiv {             vertical-align: middle;             background-color: #Ffff76;             cursor: pointer;             padding: 20px;          }                                        

How do we use wildcard or regular expressions with a jQuery selector?

David Meador
Updated on 18-Dec-2019 08:27:41

1K+ Views

Wildcard or regular expressions can also be used with jQuery selector for id of element.ExampleYou can try to run the following code to use wildcard or regular expressions with jQuery selector:Live Demo $(document).ready(function(){    $("[id^=sub]").css("background-color", "green"); }); Java HTML Ruby

How do we use jQuery Attribute selector with a period?

Amit D
Updated on 18-Dec-2019 08:25:45

228 Views

jQuery Attribute selector is used to select elements with the specified attribute and value. You can easily use it with a period (.) or a hash (#).ExampleYou can try to run the following code to learn how to use jQuery selector with a period:Live Demo $(document).ready(function(){    $( "div[myattr*='.']" ).css("background-color", "yellow");   }); Java HTML Ruby

How to remove disabled attribute using jQuery?

Amit D
Updated on 18-Dec-2019 08:24:47

11K+ Views

To remove disabled attribute using jQuery, use the removeAttr() method. You need to first remove the property using the prop() method. It will set the underlying Boolean value to false.ExampleYou can try to run the following code to learn how to remove disabled attribute using jQuery:Live Demo $(document).ready(function(){     $('.disabledCheckboxes').prop("disabled", true);     $('.disabledCheckboxes').removeAttr("disabled");     $(document).ready(function(){         $('button').on('click', function() {           if (this.hasAttribute("disabled")) {              alert('The disabled attribute exists')           } else {              alert('The disabled attribute does not exist')           }         })     });  });    Result

How do we use # in jQuery Attribute Selector?

Amit D
Updated on 18-Dec-2019 08:21:18

249 Views

To use # in jQuery attribute selector, include # under *= . This will find the attribute with #.ExampleYou can try to run the following code to learn how to use # in jQuery attribute selector:Live Demo     $(document).ready(function()  {        $( "div[myattr*='#']" ).css("background-color", "yellow");     }); Java HTML Ruby

How to set “checked” for a checkbox with jQuery?

Amit D
Updated on 18-Dec-2019 08:22:59

2K+ Views

Use the checked attribute to set the checkbox with jQuery. Also, the prop() method is used to get the property value.ExampleYou can try to run the following code to learn how to set checked for a checkbox:Live Demo   jQuery Example     b {      color: green;   }       Check/ Uncheck this checkbox   $( "input" ).change(function() {   var $input = $( this );   $( "p" ).html(     ".attr( \"checked\" ): " + $input.attr( "checked" ) + "" +     ".prop( \"checked\" ): " + $input.prop( "checked" ) + "" +     ".is( \":checked\" ): " + $input.is( ":checked" ) + "" ); }).change();  

Advertisements