How to Check/Uncheck CheckBoxes in a Page using jQuery? Example Tutorial

In the last couple of articles, I have shared a couple of useful jQuery tips like reloading web pages and working with tag selectors. Today, I'll show you how to check or uncheck a particular checkbox using jQuery, one of the most popular JavaScript frameworks. jQuery provides CSS like selectors which can make this kind of task trivial. If you remember, in HTML a checkbox is checked if the "checked" attribute is present and its value is not false, otherwise, it's unchecked. By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked.

Top 20 jQuery Interview Questions and Answers

Without a doubt, jQuery has given a much-needed boost to JavaScript, a language so useful but equally underrated at times. Before jQuery comes into the picture, we used to write lengthy JavaScript code not just for bigger but even for smaller functions. Those codes were at times both difficult to read and maintain. Having written JavaScript before using this excellent library, I realized the true power of jQuery, just after using it for a month. Given its huge popularity, jQuery interview questions are increasingly asked in any web developer interview, not just beginners but also experienced developers, including HTML and JavaScript.

How to get current URL, parameters and Hash tag using JQuery and JavaScript? Example

While dealing with the current URL, many times you want to know what is the current URL path, What are the parameters, and what is the hashtag on the URL. The hashtag is pretty important if you are implementing a tab structure using HTML and JQuery. To avoid confusion, let's take an example of a URL: http://javarevisited.blogspot.com/2013/01/top-5-java-programming-books-best-good.html#ixzz2PGmDFlPd, in this example ixzz2PGmDFlPd, is a hashtag. Now, both JavaScript and JQuery provide a convenient way to retrieve the current URL in the form of window.location object. You can use various properties of the window.location JavaScript object like the window.location.href to get complete URL, window.location.pathname to get the current path, and window.location.hash to get a hashtag from current URL.

jQuery Tutorial - How to modify multiple HTML elements in one line? Example

jQuery allows you to modify multiples elements in one go, you can modify attributes, text, or color of multiple HTML elements by executing just one line of jQuery code. In this jQuery tutorial, I will show you how to modify multiple <li> elements in one go. In our example, we have a couple of <li> tags to display sub-headings, now we will change them in one go using jQuery. If you look at our HTML, we have an ordered list <ol> to display the top 10 programming languages, each of them is an <li> item. We also have one button, "Click Me", which will when clicked, change all <li> item's text to "jQuery is the new Boss". Here is the jQuery code, which does that.

How to reload/refresh a page using JavaScript and jQuery? Example

JavaScript provides several ways to reload or refresh an HTML page but the standard way to do this job is by using window.location object. This object provides a reload() method which instructs the browser to reload the page. The browser can do it from its cache or from the server, which depends upon optional parameter i.e. reload(true) will reload the page from the server but reload(false) will only reload the page from the browser's cache, which may or may not represent the current version at the server.

How to Create Tabs UI using HTML, CSS, jQuery, JSP and JavaScript? Example

JSP is still a popular technology for developing view part of Struts and Spring-based Java applications, but unfortunately, it doesn't have rich UI support available in GWT, or any other library. On another day, we had a requirement to display HTML tables inside tabs, basically, we had two tables of different data set and we need to display them in their own tabs. Users can navigate from one tab to another, and CSS should take care of which tab is currently selected, by highlighting the active tab. Like many Java developers, our hands-on HTML, CSS, and JavaScript are a little bit tight than a web guy, and since our application is not using any UI framework, we had to rely on JSP to do this job.

How to dynamically create a div in jQuery? Example

Many times you need to create an HTML element and dynamically add that into DOM without reloading the page. The traditional way of doing this is by using JavaScript's innerHtml() function but jQuery provides better ways to achieve the same effect. You can use jQuery DOM manipulation methods like append(), appendTo() or html() to add new HTML elements like div, paragraph, headings, image into DOM without reloading the page again. In this tutorial, I will show you how to dynamically create a div and add that into a page by using pure jQuery.