Select all checkboxes with jQuery not working

Question

I have this issue and can't figure out why my code isn't working.

I want to select all checkboxes when clicking on "Todas".

I made a fiddle with the code and it works there, but when running on my project it doesn't, even though no errors are displayed while inspecting.

The jQuery function is from another post :

$('#allstates').click(function() {
    var c = this.checked;
    $(':checkbox').prop('checked',c);
});

and html code snippet is:

<div class="hide" id="states">
  <div class="control-group">                           
    <label class="control-label">Seleccione</label>
      <div class="controls">
        <label class="checkbox span4">
          <input type="checkbox" class="all" value="all" id="allstates" name="all"/>Todas
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
        </label>
        <label class="checkbox span4">
          <input type="checkbox" value="Chaco" id="" name="st[]"/> Chaco
        </label>
       </div>
  </div>
</div>

Am I missing something?

EDIT

Found out by inspecting that the template I use adds these lines to the checkboxes and that is why this doesn't work on my code, but it does on fiddle.

Here is a snippet:

<label class="checkbox span4">
    <div class="checker">
     <span><input type="checkbox" value="Buenos Aires" id="" name="st[]">
     </span>
    </div> Buenos Aires
</label>

So now I'm still struggling to check and uncheck the elements...

Is your jQuery in a document ready call or at the bottom of the document? jsFiddle wraps the code in a `window.load()` by default. — j08691, Aug 04 '14 at 16:18
the file where I have this checkboxes is being called from another one (the main one), so yes... jquery is being loaded — Limon, Aug 04 '14 at 16:19
I don't understand your comment. Could you post a link to your page? — j08691, Aug 04 '14 at 16:21
@j08691 sorry don't have it on the internet. I meant that jQuery is being loaded. — Limon, Aug 04 '14 at 16:23
place your code in $(document).ready(function(){ //your code..}); then try.. — Devendra Soni, Aug 04 '14 at 16:24
I actually didn't ask if jQuery was loaded, but rather is your code wrapped in a document.ready call, or loaded at the end of the document? You may be trying to execute it before the elements exist. — j08691, Aug 04 '14 at 16:24
@j08691: In that case an error would occur, but Limon said that there were no errors displayed when inspecting. — Luka, Aug 04 '14 at 16:27
@Luka - no, no error would be generated and it would silently fail. Do you see any errors here http://jsfiddle.net/j08691/L4C2f/? — j08691, Aug 04 '14 at 16:29
hey try this code in your application... $(document).ready(function(){ $(document).on("click",'#allstates',function() { $(':checkbox').prop('checked',this.checked); });}); — Devendra Soni, Aug 04 '14 at 16:29
@j08691 oh.. the js file is being called from the template where I have the html, at the end of the document — Limon, Aug 04 '14 at 16:30
@j08691: An error comes out whenever you try to register an event on an element that hasn't yet been loaded, or to call a method on it. — Luka, Aug 04 '14 at 16:43
@j08691: No errors there, indeed, but that might be because of the way JSFiddle was made. In pure JavaScript you always get an error in your browser console. Therefore, there should be an error in jQuery as well since it was written in pure JavaScript. Limon, have you tried checking for errors in your browser debugging console on the web page you're working on without JSFiddle? — Luka, Aug 04 '14 at 17:13
@Luka yes I did, I'm drivin nuts here. No erros are displayed when inspecting.. — Limon, Aug 04 '14 at 17:36

score 1 · Accepted Answer · answered Sep 04 '14 at 16:14

Solution was to find that "span" tag that another js file adds (I'm using a template based on bootstrap). So code that works is:

$('#allstates').click(function() {
  if($(this).attr("checked")){
    $('#states').find('span').addClass('checked');  
    $('#states').find('input').prop('checked',true);        
  }else{
    $('#states').find('span').removeClass('checked');
  }    
});

score 0 · Answer 2 · answered Aug 04 '14 at 19:22

Try something like the following:

<html>
<head>
    <script type="text/javascript" src="JQ.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#allstates').click(function() {
            var c = this.checked;
            $(":checkbox").prop("checked", c);
            });
        });
    </script>
</head>
<body>
    <div class="hide" id="states">
      <div class="control-group">                           
        <label class="control-label">Seleccione</label>
          <div class="controls">
            <label class="checkbox span4">
              <input type="checkbox" class="all" value="all" id="allstates" name="all"/>Todas
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
            </label>
            <label class="checkbox span4">
              <input type="checkbox" value="Chaco" id="" name="st[]"/> Chaco
            </label>
           </div>
      </div>
    </div>
</body>
</html>

JQ is a jQuery library (version 1.11.1).

Luka thanks for the answer. Check on my edit and you will understand which my problem is...I have just found that — Limon, Aug 04 '14 at 19:30

Select all checkboxes with jQuery not working

2 Answers2

Linked