Win a copy of Learn Spring Security (video course) this week in the Spring forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery: how to determine if any checkbox is checked.

 
Dennis Spring
Greenhorn
Posts: 12
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
How do you determine if there are any checkboxes in an html form that are checked?
You can copy these 2 scripts into2 files, and try this solution.
Note: The html script assumes that you have jquery-1.2.1.js and ds_jq.js in a folder
up one level called 'scripts'. You can un-rem the alert on the js page to confirm that
the html page 'sees' the js page.


The code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- ckbox_testpage.html -->
<!-- Dennis Spring, Charlotte, NC USA 2010-04-07 -->
<html>
<head>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript" src="../scripts/ds_jq.js"></script>
<script type="text/javascript">
$(function(){
$(':checkbox').click(function(){
// if the wrapped set has any elements in it...
if ($('input:checkbox:checked').length > 0){
// do some work...
alert("head-script: There is a Checked checkbox.");
}
});
});
</script>
</head>
<body>
<div id="formDiv">
<form action="another_page.html" method="POST" id="frm1">
I like dogs: <input type="checkbox" name="likeDogs" value="likes dogs"/>
I like cats: <input type="checkbox" name="likeCats" value="likes cats"/><br/>
</form>
</div>
</body>
</html>
********************************

// ds_jq.js
// Dennis Spring, Charlotte, NC USA 2010-04-07

jQuery(document).ready(function() {

//alert("ds_jq.js found!");

if ($('input:checkbox:checked').length > 0) {
// do some work...
alert("js include: There is a Checked checkbox.");
}

});

Issue:
I first tried the following syntax to determine if there existed a checked checkbox:
if ($('input:checkbox:checked')) alert("There is a Checked checkbox.");
But even when no box was checked, the decision tested true, and the Alert window popped up.

Sheriff Bibeault enlightened me with this explanation:
"
Your if test will always return true. The $() function is returning a jQuery wrapped set, even if
that wrapped set is empty.
Make your test more crisp and explicit:
if ($('input:checkbox:checked').length > 0)
"

Using that code does the trick. Try it.
Load the page into your browser (your url might be something like http://localhost/htdocs/ckbox_test_page.html).
Note that no js Alert window popped up. Neither checkbox was checked, so this was expected.
Click in a checkbox. The Alert window indicates that the click handler in the head of the html page executed.
Next, click the Refresh button on your browser; the Alert window indicates that the ready handler script in ds_jq.js fired.
Click the other checkbox: again the local function executes.
Finally, click one of the checkboxes again, un-checking it.
Note that the html page javascript fires again, because there is still one checkbox checked.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64610
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Welcome to the Ranch!

To keep your posts with code readable please read: UseCodeTags.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic