How to address the same item inside a JQM multi-page setup - e.g. checkbox?

Question

I am trying to determine if a checkbox is checked with jQuery multi page setup, but it always returns "false" unless I mark the item as "checked" per default.

My code looks pretty basic to me:

  <script>
    function updateUrls(){
      console.log('test: ' + $('#filter_pic').is(':checked'));
    });
  </script>
  <form>
    <input type="checkbox" name="filter_pic" id="filter_pic" onchange="updateUrls();">with pix
  </form>

The reason for this might be, that this code is inside a multi page setup. In fact the code looks similar to this:

   <div data-role="page" id="select_dienstleistungen">  
        <div data-role="content"> 
        <script>
        function test() {
          console.log('test: ' + $('#filter_pic').is(':checked'));
        };
   ....
        <form>
           <input type="checkbox" name="filter_pic" id="filter_pic" onchange="updateUrls();">with pix
        </form>
   </div
   <div data-role="page" id="select_jobs">  
        <div data-role="content"> 
        <script>
        function test() { 
    ...

How is it possible to address the item inside the pages? All those pages have the same checkbox item as the code is valid for all those different pages.

You should use jQuery event binding, rather than inline `onchange`.... — random_user_name, Mar 19 '16 at 17:24
The jsfiddle is working fine, but on my page I do always get false? How is this possible? — merlin, Mar 19 '16 at 17:32

James · Answer 1 · 2016-03-19T17:46:49.113

1

<script type="javascript/text">
    $('#filter_pic').change(function() {
        console.log('test: ' + $(this).prop('checked'));
    });
</script>
<form>
    <input type="checkbox" name="filter_pic" id="filter_pic" />with pix
</form>

Took out the "onchange".

Original Post

Use

$('#filter_pic').prop('checked')

instead to check the property.

Also, I think it may be a JQuery version problem. Other people have had this problem as well even though the "is(':checked')" works elsewhere.

edited Mar 19 '16 at 17:46

answered Mar 19 '16 at 17:22

James

3,765
4
48
79

_I am trying to determine if a checkbox is checked with jQuery_ – Rajaprabhu Aravindasamy Mar 19 '16 at 17:23
@RajaprabhuAravindasamy This returns true if the checkbox is checked... Why did you comment? – James Mar 19 '16 at 17:24
1

Why didn't OP code work? We can suggest him more options but he is asking why his code not giving the expected result. By the way, I didn't downvote. – Rajaprabhu Aravindasamy Mar 19 '16 at 17:25
@RajaprabhuAravindasamy No worries about the down vote, just wondered why you commented. – James Mar 19 '16 at 17:26
.prop() is the best option for working with form "selected" states – Undefitied Mar 19 '16 at 17:28
I tried prop as well, but it also returns "false". The version I am using is: jquery-1.12.0.min.js – merlin Mar 19 '16 at 17:34
@merlin Try my update instead. – James Mar 19 '16 at 17:37
I did, this must be a problem of the multipage setup, as the ID is available multipe time inside the document, but only once inside the page. Looks like an architecture problem. – merlin Mar 19 '16 at 17:53

Ahmad Sharif · Answer 2 · 2016-03-19T17:27:03.657

0

<script>
    function updateUrls(){
      console.log('test: ' + $('#filter_pic').is(':checked'));
    };
  </script>
  <form>
    <input type="checkbox" name="filter_pic" id="filter_pic" onchange="updateUrls();">with pix
  </form>

// One extra parenthesis ')' before the ';' semicolon. I have checked by removing this one. And is working fine in my end.

edited Mar 19 '16 at 17:27

answered Mar 19 '16 at 17:25

Ahmad Sharif

4,141
5
37
49

That must be a typo. Because he's saying the code is printing false all the time. He is not complaining about errors. – Rajaprabhu Aravindasamy Mar 19 '16 at 17:26
Yes, this was a typo. – merlin Mar 19 '16 at 18:00

How to address the same item inside a JQM multi-page setup - e.g. checkbox?

2 Answers2