Question

我正在使用jQuery Templating，它包含模板中的复选框。但我想计算已选中复选框的数量并在主手风琴中显示。但是jQuery 更改 listen事件不会读取复选框中的更改。

data.json

[
{
    "prefixid" : 1,
    "heading" : "Prefix",
    "division" : [
        {"id" : 1, "name" : "Option1"},
        {"id" : 2, "name" : "Option2"},
        {"id" : 3, "name" : "Option3"}
    ]
},
{
    "prefixid" : 2,
    "heading" : "Owning District",
    "division" : [
        {"id" : 1, "name" : "Option1"},
        {"id" : 2, "name" : "Option2"},
        {"id" : 3, "name" : "Option3"}
    ]
},

...
]

jQuery模板

 <div class="col-md-12 accord-filter scrollbox2">
    <div class="panel-group" id="accordion">
          <script id="filterColumn" type="text/x-jQuery-tmpl">
            <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse-${prefixid}">
                        ${heading}

                        <span class="accordion-toggle">
                        <span class="checkcount">(<span class="count-${prefixid}">0</span>)</span></span>
                    </a>
                  </h4>
                </div>
                <div id="collapse-${prefixid}" class="panel-collapse collapse">
                  <div class="panel-body scrollbox2">
                   <div class="right-inner-addon">
                    <i class="icon-search"></i>
                    <input type="search" class="form-control" placeholder="Search">
                  </div>
                    {{each(prop, val) division}}
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="" data-header="${prefixid}" data-select="${val.id}"> ${val.name}
                        </label>
                      </div>
                     {{/each}}
                  </div>
                </div>
            </div>
          </script>
    </div>
</div>

的javascript

    $.unify = {};
    $.unify.constant = {};
    $.unify.constant.filter = {};
    $.unify.filter = {};
    $.unify.filter.checkboxcount = [];

    $(document).ready(function(){
        $.unify.filter.readFilterData();
        $.unify.filter.templateFilter();
    });

    $.unify.filter.readFilterData = function() {
        $.ajaxSetup({ cache: false });

        $.ajax({
            type: "GET",
            url: 'data.json',
            dataType: "json",
            async: false,
            beforeSend:function() {
                console.log(' => [INITIATED] {FILTER} Read Data.');
            },
            success: function($data) {
                $.unify.constant.filter = $data;
                console.log(' => [SUCCESS] {FILTER} Read Data.');
            },
            error: function() {
                console.error(' => [ERROR] {FILTER} Read Data.');
            }
        });
    };

    $.unify.filter.templateFilter = function() {
        console.log($.unify.constant.filter.length);

        for (var i = 0; i <  $.unify.constant.filter.length; ++i) {
            $.unify.filter.checkboxcount[i+1] = 0;
        }

        $('#filterColumn').tmpl($.unify.constant.filter).each(function (index) {
            console.log(index);
        }).appendTo('#accordion');
    };

    $('#accordion input[type="checkbox"]').change(function() {
        console.log('Clicker');
        var $prefix = $(this).data('header');
        var $select = $(this).data('select');
        if($(this).is(':checked')) {
            $.unify.filter.checkboxcount[$prefix] += 1;
        } else {
            $.unify.filter.checkboxcount[$prefix] -= 1;
        }
        $('.count-' + $prefix).html($.unify.filter.checkboxcount[$prefix]);
    });

    $('[name="filter-clear-all"]').on('click', function(){
        $('#accordion .group input[type="checkbox"]').attr('checked', false);
        for (var i = 0; i <  $.unify.constant.filter.length; ++i) {
            $('.count-'+(i+1)).html('0');
        }
    });

完整示例在plnkr链接http://plnkr.co/edit/ec52cEOclOVvop52PWuH?p=preview

中给出

Answer 1

此fiddle可能会有所帮助

$("#chk").change(function() {
   alert("triggered!"); 
});

$("#trigger_btn").click(function(e) {
    e.preventDefault();
    $("#chk").trigger("change");
});

JQuery tmpl +复选框计数

1 个答案: