here is my 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 by {{ 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>
{% for 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 to select all check-boxes doesn't seem to work and I don't know why.
pd: I put all the scripts in the base layout this way:
<script type="text/javascript" src="{{ url_for('static', filename='js/eh.js') }}"></script>
I think I should clarify something, the main checkbox is 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 %}