• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Checked Selector

May 18, 2014 //  by Krishna Srinivasan//  Leave a Comment

JQuery checked selector selects all the elements that are checked. It selects only checked items of checkbox type in the document. It matches every checked input elements in the document. The checked selector is only used for radio buttons or checkboxes.

When compare to checkbox selector, user can change the state by clicking on the element or selecting different value. The checkbox selector can be used to select the checkboxes manually. If we want to select a checkbox to be selected by default then use checked attribute for it. Use checked attribute in the input tag, so that only those checkboxes will get selected by default.

JQuery Checked Selector Syntax

$(“:checked”)

JQuery Checked Selector Example

<!doctype html>
<head>
<title>JQuery Checked Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Checked Selector Example</h2>
<style>
 div {
    color: red;
  }
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $(":checkbox").wrap("<span style='background-color:orange'/>");
	 $("input[name='sport']").change(function () {
	    var count = $("input[name='sport']:checked").length;
	       $("div").text(+count+ " checked");
         });
   });
</script>
<form action="">
Select your favourite sport:<br/>
Cricket:<input type="checkbox" name="sport" value="Cricket" checked/>
Football:<input type="checkbox" name="sport" value="Football"/>
Hockey:<input type="checkbox" name="sport" value="Hockey" checked/>
Volleyball:<input type="checkbox" name="sport" value="Volleyball"/>
</form>
<div></div>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • The next line defines checked selector which selects all the checked elements of type checkbox. It uses wrap method which defines HTML structure around element in the matched elements.
  • $(“input[name=’sport’]”).change(function ()) line defines change event which occurs when value of the element is changed.
  • var count = $(“input[name=’sport’]:checked”).length; statement defines number of checked checkboxes by specifying name attribute of input tag.
  • $(“div”).text( +count+ ” checked” ); line specifies how many checkboxes are selected/checked by the user and uses CSS color property to display the message in red color.
  • When we run the script, we will get four checkboxes as specified in the script. The checkboxes will get display with orange background color around each element. The checked checkboxes will get display with checkmark on the browser.

When you run the above example, you would get the following output:

  • Run This Demo

JQuery Checked Selector Picture

Category: jQueryTag: JQuery Selectors

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Spring Data Neo4j 3 REST Exporter – Converting Spring Boot JAR Application To WAR
Next Post: Spring Data + MongoDB + REST Shell Integration »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact