在Check / Uncheck All

时间:2015-07-03 15:02:24

标签: javascript jquery model-view-controller checkbox

我有一个包含多个复选框的表格。每次我选中或取消选中一个复选框时,它都会调用一个函数,该函数将参数作为模型发送到控制器以更新数据库。现在我想检查/取消选中All,做同样的事情。我可以检查/取消选中它们,但不调用该函数。

复选框

<input id="Include" class="checkBoxClass" type="checkbox" @(item.Include != "1" ? null : "checked")>

将模型发送到控制器的功能

$('input:checkbox').change(function () {
        var tr = $(this).parents('tr:first');
        var Id = document.getElementById('Id').value;
        (...)
        var UserModel =
        {
            "Id": Id,
            (...)

        };
        $.ajax({
            url: '@Url.Action("Action","Controller")',
            type: 'POST',
            data: JSON.stringify(UserModel),
            contentType: 'application/json; charset=utf-8',
            success: function () {
            }
        });
    });

我的检查/取消选中所有代码

$('#ckbCheckAll').click(function (event) { 
            $('.checkBoxClass').each(function () {
                if (!this.checked)
                {
                $('.checkBoxClass').each(function () { 
                    $('.checkBoxClass').click("checked", true);
                });
                } else {
                $('.checkBoxClass').each(function () { 
                    $('.checkBoxClass').click("checked", false);
                });
            }
            });
        });

当我点击#ckbCheckAll按钮时,所有复选框都被选中/取消选中,但即使我在我的&#34;发送模型到控制器&#34;功能,它不工作。

  • 我在这里做错了什么?
  • 以这种方式可靠吗?

1 个答案:

答案 0 :(得分:1)

简单来说,对于check-all按钮,如果单击checkall框,请选中(if)每个(.each())复选框,如果选中该框,则单击(.click())以取消选中它,

&#13;
&#13;
$('input[type=checkbox]').change(function(){/*alert('change')*/});
$('.checkall').click(
    function() {
    $('input[type=checkbox]').each(function(index,el){
        if(!this.checked) {
            $(el).click(); // check all box;
        } 
    });
  }    
);
$('.uncheckall').click(
    function() {
    $('input[type=checkbox]').each(function(index,el){
        if(this.checked) {
            $(el).click(); // uncheck all box;
        } 
    });
  }    
);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="button" value="check all" class='checkall'/>
<input type="button" value="uncheck all" class='uncheckall'/>
&#13;
&#13;
&#13;