Question

我有几个复选框和两个按钮来选择全部，并取消全选。

<div class="row">

        <div class="col m3">
            <button type="button" id="providerall" ng-click="updateSelection(-1)">Select All</button>
        </div>

        <div class="col m3" ng-hide="@allUnselected">
            <button type="button" id="providernoone" ng-click="updateSelection(-2)">Un Select All</button>

        </div>

    @foreach (var m in Model.Provider)
    {

        var attr = (m.IsSearchable) ? "checked" : "";
        <div class="col m3">
            <p class="left">
                <input class="checkbox" type="checkbox" id="provider+@m.Id" @attr ng-click="updateSelection(@m.Id)" />
                <label for="provider+@m.Id">@m.ProviderName</label>
            </p>
        </div>
    }
</div>

所以当我点击选择所有按钮时，它应该检查所有复选框，并应隐藏它自己选择所有按钮（然后显示取消选择所有按钮），当我点击取消选中所有按钮时，它应该取消选中所有复选框并隐藏取消选择按钮并显示全选按钮。

单击任何复选框时，它应显示两个按钮。

我应该用jquery做什么？

 $('#providerall').click(function () {
    var checked = true;
    $('.checkbox').each(function () {
        $(this).prop('checked', checked);
    });
   $('#providerall').hide();
    $('#providernoone').show()
})
$('#providernoone').click(function () {
    var checked = false;
    $('.checkbox').each(function () {
        $(this).prop('checked', checked);
    });
   $('#providernoone').hide();
    $('#providerall').show();
})

我期望的是全部复选框被选中它不应该显示全选按钮，如果取消选中任何一个复选框而选中其他复选框则应显示两个按钮。

Answer 1

试试这个

// on select all
$("#providerall").click(function(){
  $('.checkbox').prop('checked', true);
  $(this).hide();
 $("#providernoone").show();
});

//on un select all

$("#providernoone").click(function(){
  $('.checkbox').prop('checked', false);
  $(this).hide();
  $("#providerall").show();
});

Answer 2

你快到了。试试这个：

{{1}}

请检查最后添加的代码片段，以便在点击任何单个复选框时管理按钮的可见性。

Answer 3

It worked. thanks to vijay

 $('#providerall').click(function () {
    var checked = true;
    $('.checkbox').each(function () {
        $(this).prop('checked', checked);
    });
    $('#selectAllDiv').hide();
    $('#unSelectAllDiv').show()
})
$('#providernoone').click(function () {
    var checked = false;
    $('.checkbox').each(function () {
        $(this).prop('checked', checked);
    });
    $('#unSelectAllDiv').hide();
    $('#selectAllDiv').show();
})

$('.checkbox').click(function () {
    showAndHideButtons();
});

var showAndHideButtons = function () {
    var totalCheckboxCount = $('.checkbox').length;
    var totalCheckedInputs = $(".checkbox:checked").length;
    console.log(totalCheckboxCount, totalCheckedInputs)
    if (totalCheckboxCount != totalCheckedInputs) {
        $('#unSelectAllDiv').show();
        $('#selectAllDiv').show();
    }
    else if (totalCheckboxCount == totalCheckedInputs) {
        $('#unSelectAllDiv').show();
        $('#selectAllDiv').hide();
    }
    if (totalCheckedInputs == 0) {
        $('#unSelectAllDiv').hide();
        $('#selectAllDiv').show();
    }

}
showAndHideButtons();

选择全部并使用jquery和cshtml取消全选？

3 个答案: