Javascript function not checking all boxes

Question

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

what happens in your dev tool console? "The code is for select all checkBox with the principal, but dont work." what doesnt work? — glls, May 25 '16 at 03:51
http://imgur.com/FCLfJ5K With the principal ( red circle ) try to select all the checkbox, but doenst work — Oriphiel, May 25 '16 at 03:54
that is 1 checkbox, you are unable to select your checkboxes? or is a script supposed to do something when you select a checkbox? — glls, May 25 '16 at 04:23
in the meantime please consider reviewing the following link http://stackoverflow.com/help/mcve — glls, May 25 '16 at 04:26

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

Since your checkboxes are being generated dynamically, this notation,

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

As of jQuery 1.7 should be jQuery.fn.on

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

there is a detailed article on this here Event binding on dynamically created elements?

Which might explain why your script is not working.

edited May 23 '17 at 12:31

Community

1
1

answered May 25 '16 at 04:40

glls

1,996
1
18
32

you have to recode your javasript function as is, please re-post your modified code – glls May 25 '16 at 06:16

score 0 · Answer 2 · edited May 23 '17 at 12:15

Consider a different approach: from How to implement "select all" check box in HTML? Create two different functions, one to get all check boxes by tagname as mentioned below, and another to call the "check all":

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;
  }
}

finally, add this in your HTML tag:

onClick="toggle(this)"

Your HTML tag will look something like this:

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

and this should do the trick for you.

Javascript function not checking all boxes

2 Answers2