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
Post a Comment