6 Replies - 5440 Views - Last Post: 15 January 2013 - 12:14 PM

#1 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 177
  • Joined: 18-May 11

Checking if checkbox is checked with jQuery Mobile

Posted 14 January 2013 - 06:50 PM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: Checking if checkbox is checked with jQuery Mobile

#2 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Re: Checking if checkbox is checked with jQuery Mobile

Posted 14 January 2013 - 07:09 PM

try this:
<input type='checkbox' name='color' value='red' checked> Red </br>
<input type='checkbox' name='color' value='blue'> Blue </br>
<input type='checkbox' name='color' value='green'> Green </br>



Simply use this selector you dont need to use any method.
$('input:checked');


By the way the reason you got this error is because your query selector selects a div and then you tried to access the checked property/value, which is not available in an [object HTMLDivElement]

But when you used if( !$('#terms').attr('checked') it only worked because you used the attr() method which try to access the attribute of the div element.

This post has been edited by quim: 14 January 2013 - 07:19 PM

Was This Post Helpful? 1
  • +
  • -

#3 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 177
  • Joined: 18-May 11

Re: Checking if checkbox is checked with jQuery Mobile

Posted 14 January 2013 - 07:29 PM

Well I tried that, still got the same error. And would you mind explaining why it didn't work again? Didn't quite get what you meant. Maybe this will help, here's the HTML for the input checkbox

<span > <input type="checkbox" name="terms" id = "terms" > </span> <span> Check to agree to our <a href = "#terms_and_conditions" data-rel="dialog" data-transition="flip" > terms and conditions </a> </span>

This post has been edited by Dormilich: 14 January 2013 - 11:15 PM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#4 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Re: Checking if checkbox is checked with jQuery Mobile

Posted 14 January 2013 - 08:34 PM

Check this picture to see the code i tried in jsfiddle.net.
Unfortunalty i could not upload it to DIC because of file size.
https://docs.google....GhNb2Eyb28/edit


The reason its not working is because jquery thinks that you are accessing a div element.

When you use the
$('terms');
jquery actually creates an object according to the query selector.
so if your query selector selects a div jquery will create a div object that has its own properties, method and event.

And if the query selector is a checkbox DOM element, jquery will create checbox object that has its own propery, method, and even.

Did you assign the terms id to any other element in you document?

The reason you got the error is because jquery is trying to access this:
<div checked></div>

instead of this:
<input type='checkbox' value='agreement' checked>

Was This Post Helpful? 1
  • +
  • -

#5 alicemenezes  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 16
  • Joined: 09-January 13

Re: Checking if checkbox is checked with jQuery Mobile

Posted 15 January 2013 - 06:10 AM

Quim ....the picture isn't clear at all. Can't figure what it is. Have been struggling with a similar problem. :dontgetit:
Was This Post Helpful? 0
  • +
  • -

#6 quim  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 18
  • View blog
  • Posts: 182
  • Joined: 11-December 05

Re: Checking if checkbox is checked with jQuery Mobile

Posted 15 January 2013 - 11:31 AM

View Postalicemenezes, on 15 January 2013 - 08:10 AM, said:

Quim ....the picture isn't clear at all. Can't figure what it is. Have been struggling with a similar problem. :dontgetit:/>/>

I hope this helps for once.
$('#terms:checked'); this query scans the DOM and returns an array containing all object found with this criteria.


In this case we are scanning for the object with id terms and it has to be checked
If an object with id terms is checked then the array length will be 1 (truthy).
Otherwise it will be 0 (falsy in Javascript)
So in the code that I have written I am looking for '#terms:checked' and then I am checking for the length
Please describe to me what is not working? What do you not understand?

Here is the code, you might use jsfiddle to test it.

HTML:

<span> <input type="checkbox" name="terms" id = "terms" /> </span> 
  <span> Check to agree to our <a href = "#terms_and_conditions" data-rel="dialog" data-transition="flip" > terms and conditions </a> </span> 
  
  <button type='button' value='Submit' id='submitBtn' >Submit</button>


Javascript:
// Do this when the DOM is ready
$(function(){
$('#submitBtn').click(function(){  
  // can also be $('input:checked');
  if($('#terms:checked').length){
    console.log('checkbox is selected');
  }else{    
    console.log('checkbox is NOT selected');
  } 
});
  
}); // end onready

Was This Post Helpful? 1
  • +
  • -

#7 drayarms  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 177
  • Joined: 18-May 11

Re: Checking if checkbox is checked with jQuery Mobile

Posted 15 January 2013 - 12:14 PM

@quim et al, 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:)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1