Question

这是我的模板代码：

{% 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 %}

选择所有复选框的代码似乎不起作用，我不知道为什么。

pd：我以这种方式将所有脚本放在基本布局中：

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

我想我应该澄清一下，主要的复选框不是动态创建的。修改后的代码：

{% 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 %}

Answer 1

由于您的复选框是动态生成的，这种表示法，

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

从jQuery 1.7开始应该是jQuery.fn.on

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

这里有一篇详细的文章Event binding on dynamically created elements?

这可能解释了您的脚本无法正常工作的原因。

Answer 2

考虑一种不同的方法：来自How to implement "select all" check box in HTML? 创建两个不同的函数，一个用于按照下面提到的标记名获取所有复选框，另一个用于调用＆＃34;全部检查＆＃34;：

function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
    {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
  checkboxes = getcheckboxes();
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}

最后，在HTML标记中添加：

onClick="toggle(this)"

您的HTML标记看起来像这样：

<input type="checkbox" name="checkRows" onClick="toggle(this)" class="check-all" id="checkAll"/>

这应该可以解决这个问题。

Javascript函数不检查所有框

2 个答案: