python - Javascript function not checking all boxes -


here template code:

{% extends "layout/base_layout.html" %} {% block class %}body-manager{% endblock %} {% block wrapper %}     <div id="my-content" class="main-holder pad-holder span12 top10" style="padding-right:12px;">         <div class="row-fluid clearfix">             <div class="row-fluid blc mident">                 <div class="span3">                     <div class="iholder fbcolor">                         <i class="icon-film"></i>                     </div>                 </div>                 <div class="span8">                     <h1>media manager</h1>                     media shared {{ current_user.username }}<p>{{ videos|length }} entries.                     <p>                 </div>             </div>              <form class="form-horizontal styled" action=""                   enctype="multipart/form-data" method="post">                  <div class="cleafix full"></div>                 <fieldset>                     <div class="table-overflow top10">                         <table class="table table-bordered table-checks">                             <thead>                             <tr>                                 <th><input type="checkbox" name="checkrows" class="check-all" id="checkall"/></th>                                 <th colspan="2">video</th>                                 <th>duration</th>                                 <th>likes</th>                                 <th>views</th>                                 <th width="110px">                                     <button class="btn btn-danger" type="submit">unpublish</button>                                 </th>                             </tr>                             </thead>                             <tbody>                             {% item in videos %}                                 <tr>                                     <td><input type="checkbox" name="checkrow[]" value="{{ item.id }}" class="chk"/></td>                                     <td width="100"><a class="tips" target="_blank"                                                        href="{{url_base}}/watch?={{ item.token }}"                                                        title="view"><img                                             {% if item.thumb|starswith %}                                                 src={{ item.thumb }}                                                         {% else %}                                                         src="{{ url_for('static', filename=item.thumb ) }}"                                             {% endif %}                                             style="width:100px; height:50px;"></a></td>                                     <td><a class="tips" target="_blank"  href="{{url_base}}/watch?={{ item.token }}"                                            title="{{ item.title }}"><strong>{{ item.title }}</strong></a></td>                                     <td>{{ item.duration|timedelta }}</td>                                     <td>{{ item.liked }}</td>                                     <td>{{ item.views }}</td>                                     <td>                                         <div class="btn-group">                                             <a class="btn btn-danger tips"                                                href="http://localhost/me&sk=videos&p=1&delete-video=10"                                                title="unpublish"><i                                                     class="icon-trash" style=""></i></a>                                             <a class="btn btn-info tips" href="http://localhost/me&sk=edit-video&vid=10"                                                title="edit"><i class="icon-edit" style=""></i></a>                                         </div>                                     </td>                                 </tr>                             {% endfor %}                             </tbody>                         </table>                     </div>                 </fieldset>             </form>         </div>     </div> {% endblock %} {% block script %}     <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-1.11.1.min.js') }}"></script>     <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.validate.min.js') }}"></script> <script> $("#checkall").change(function(){    $('.chk').prop('checked',this.checked); });  $(".chk").change(function () {     if ($(".chk:checked").length == $(".chk").length) {      $('#checkall').prop('checked','checked');     }else{       $('#checkall').prop('checked',false);     }     }); </script> {% endblock %} 

the code select check-boxes doesn't seem work , don't know why.

pd: put scripts in base layout way:

<script type="text/javascript" src="{{ url_for('static', filename='js/eh.js') }}"></script> 

i think should clarify something, main checkbox not created dynamically. modified code:

{% block script %}     <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.validate.min.js') }}"></script>      <script>     $(document).ready(function(){         $(document).on('change', '#checkall', function () {             $('.chk').on.prop('checked', this.checked);         });          $(document).on('change', '.chk', function () {             if ($(".chk:checked").length == $(".chk").length) {                 $('#checkall').prop('checked', 'checked');             } else {                 $('#checkall').prop('checked', false);             }         });         });     </script> {% endblock %} 

since checkboxes being generated dynamically, notation,

$("#checkall").change(function(){    ... 

as of jquery 1.7 should jquery.fn.on

$(document).on('change', '#checkall', function() ... 

there detailed article on here event binding on dynamically created elements?

which might explain why script not working.


Comments

Popular posts from this blog

PySide and Qt Properties: Connecting signals from Python to QML -

c# - DevExpress.Wpf.Grid.InfiniteGridSizeException was unhandled -

scala - 'wrong top statement declaration' when using slick in IntelliJ -