JavaBeat

  • Home
  • 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)
  • Privacy
  • Contact Us

JQuery Checkbox Selector Example

May 13, 2014 by Krishna Srinivasan Leave a Comment

JQuery checkbox selector selects all the elements that are of type checkbox. It selects only checked items of checkbox type in the document. It allows user to select one or more number of choices. It is used for instances where user wants to select multiple options such as in the instance of “check all that apply” question. Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

JQuery Checkbox Selector Syntax

[code lang=”xml”]
$(“:checkbox”)
[/code]

JQuery Checkbox Selector Example

[code lang=”xml”]
<!doctype html>
<head>
<title>JQuery Checkbox Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Checkbox 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"/>
Football:<input type="checkbox" name="sport" value="Football"/>
Hockey:<input type="checkbox" name="sport" value="Hockey"/>
Volleyball:<input type="checkbox" name="sport" value="Volleyball"/>
</form>
<div></div>
</body>
</html>
[/code]

  • 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.
  • In the next line, we define the checkbox selector which selects all the 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.

JQuery Checkbox Selector Demo

  • Run This Demo

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

 

JQuery Checkbox Selector Example

Filed Under: jQuery Tagged With: JQuery Extensions, 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.

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.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved