Checking If Checkbox Is Checked With JQuery Mobile

Javascript & Ajax
#1

I get the following error with jquery mobile when trying to use a conditional to check if a checkbox has been checked

Uncaught Error: Syntax error, unrecognized expression: #[object HTMLDivElement] jquery-latest.js:4680

So here is the code



				if( !($("#terms").is(":checked")) ){//If terms box is not checked

					//Do something

				}//End of if terms box is not checked

This produces the same problem



				if( !$('#terms').attr('checked') ){//If terms box is not checked


					//Do something

				}//End of if terms box is not checked

The problem doesn’t occur with pages that run on regular jQuery, just the mobile version. I don’t know if these methods I used above are deprecated for the latest jQM. I believe it is 1.8.2
Who knows what I should use?

#2

I don’t think this code is your problem. I did a quick test:

<script type="text/javascript">
$(document).ready(function() {
	$('#terms').change(function() {
		if (!($(this).is(":checked"))) {
			return alert('#terms is not checked');
		}
		return alert('#terms is checked');
	});
});
</script>

Using

<div data-role="fieldcontain">
 	<fieldset data-role="controlgroup">
		<input type="checkbox" name="terms" id="terms" class="custom" />
		<label for="terms">I agree</label>
    </fieldset>
</div>

No problems.

#3

@m@tt

Here’s my HTML markup

						<div id = "terms_and_conditions" align = "center">


							<input type="checkbox" name="terms" id = "terms" />


							<label for = "terms"> Check the box </label>

						</div> <!--closes terms and conditions-->

The above is wrapped around a filedset along with some other form elements. I can’t really figure out where I’m going wrong

#4

Your error doesn’t indicate that it’s related to is(’:checked’) since the error is actually in your jquery-latest.js file. I’m guessing something that’s included before jquery is causing the problem. Are you mixing libraries?

Here’s my full test file. See if you can duplicate the error using this:

<html>
<head>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#terms').change(function() {
		if (!($(this).is(":checked"))) {
			return alert('#terms is not checked');
		}
		return alert('#terms is checked');
	});
});
</script>
</head>
<body>
<div data-role="fieldcontain">
 	<fieldset data-role="controlgroup">
		<input type="checkbox" name="terms" id="terms" class="custom" />
		<label for="terms">I agree</label>
    </fieldset>
</div>
</body>
</html>
#5

@m@tt, I must apologize, there really wasn’t any problem with the code. There was a tiny glitch in my original script which was the source of the problem. A good night’s sleep can make a huge difference. But thanks, I did learn a lot from your attempted solutions:)

Sponsor our Newsletter | Privacy Policy | Terms of Service