Form Checked box (input:checked)
In this chapter you will learn:
- Description and Syntax for Form Checked box selector
- Examples for Form Checked box selector
- How to select sibling for checked form elements
Description and Syntax
$(":checked")
selects all form elements-checkboxes and radio buttons-that are checked.
Examples
The following code does the count for checked form elements.
<html><!-- jav a 2 s . c o m-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("input:checked").length);
});
</script>
</head>
<body>
<body>
<form>
<input type="button" value="Input Button"/>
<input type="checkbox">java2s.com</input>
<input type="checkbox" />
<input type="checkbox" />
<input type="file" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />
<select><option>Option<option/></select>
<textarea></textarea>
<button>Button</button>
</form>
</body>
</html>
Checked sibling
The following code finds all inputs that are not checked and highlights the next sibling span.
<html><!-- j a va 2 s . c om-->
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:not(:checked) + span").css("background-color", "yellow");
});
</script>
</head>
<body>
<body>
<div>
<input type="checkbox" name="a" />
<span>A</span>
</div>
<div>
<input type="checkbox" name="b" />
<span>B</span>
</div>
<div>
<input type="checkbox" name="c" checked="checked" />
<span>C</span>
</div>
</body>
</html>
Next chapter...
What you will learn in the next chapter: