w3resource

jQuery: Finds all checkbox inputs

jQuery Fundamental - II : Exercise-54

Finds all checkbox inputs.

Sample solution :

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Finds all checkbox inputs.</title>
</head>
<body>
<form>
<input type="button" value="Input Button">
<input type="checkbox">
<input type="checkbox">
<input type="hidden">
<input type="button" value="Output Button">
<select>
<option>Option</option>
</select>
</form>
<p></p>
</body>
</html>

JavaScript Code :

var input = $( "form input:checkbox" )
.wrap( "<span></span>" )
.parent()
.css({
background: "black",
border: "2px red solid"
});
$( "p" )
.text( "No. of checkbox: " + input.length)
.css( "color", "blue" );

See the Pen jquery-fundamental-exercise-54 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: Attaches a change event to the select element (Use to create a drop-down list.) that gets the text for each selected option and writes them in a paragraph.
Next: Finds all elements that are checked or selected

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.