Javascript and django app / boilerplate integration

Question

I'm writting a Django app, combined with a boilerplate template. I have a table with checkboxes and I'm trying to implement a select all checkbox using javascript but is not working

Following this recomendation django checkbox select all by jquery I put in main.js

$("#selectAll").live('change',function() {
  $(".checkbox_delete:checkbox").attr('checked', this.checked);
});

I also tried to put it directly on index.html

On my index.html y wrote

<input type="checkbox"  id="selectAll"  />
<label for="selectAll"> Select</label>

 {% for event in latest_events_list %}
 <input type="checkbox" class="checkbox_delete" name="event" id="event.id"
         value="{{ event.id }}"  />
{% endfor %}

The page is correctly displayed but the javascript doesnt work

The boilerplate generates the link to js files. In the header appears

<script src="/static/js/dh5bp/vendor/modernizr-2.6.2.min.js"></script>

And before closing the body tag :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write ('<script     src="/static/js/dh5bp/vendor/jquery-1.10.2.min.js"><\/script>')</script>
 <script src="/static/js/dh5bp/plugins.js"></script>
 <script src="/static/js/main.js"></script>

All the js files are correctly linked, I can follow them

I have no experience with js., so I dont know if I'm missing something.

EDIT:

I installed firebug on both browsers. On firefox it warned me that

TypeError: $(...).live is not a function    

$("#selectAll").live('change',function() { 

so i changed the code for

$(function(){
    $("#selectAll").change(function() {
    $(".checkbox_delete:checkbox").attr('checked', this.checked);
    });
 }); 

Now it works just the first time i load the page, but if i "select all" and "unselect all" I cant "select all" them again

Answer 1

Finally it works,

the problem is the attr()

According to this post jquery select all checkboxes

in jQuery 1.6 and above, prop() should be used for "checked" status instead of attr() with true or false being passed

Finally the working code was

$("#selectAll").change(function() {
   $(".checkbox_delete:checkbox").prop('checked', this.checked);
});

Answer 2

$(".checkbox_delete:checkbox").attr('checked', $(this).attr('checked));

Try with this

Answer 3

The only thing wrong in your code that I can find is the following:

$(".checkbox_delete:checkbox").attr('checked', this.checked);

this should be

$(".checkbox_delete[type="checkbox"]").attr('checked', this.checked);

NOTE

[type="checkbox"] won't be needed if you have good classnames and don't use the .checkbox_delete on radio's etc.

Your original selector was not valid. You would have gotten errors logged into your console.

In firefox the shortcut for this is F12, If you don't have firebug for FF / Chrome installed, I'd recommend you do so as it is an extremely good way of checking for JS errors, which usually ends in solving them as well.