CODEWITHSUNDEEP
jqueryrazor
hilda_sonica_vish
hilda_sonica_vish

Reputation: 757

Select all and Unselect all using jquery and cshtml?

I have several check boxes and two buttons to select all, and Unselect All.

<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="[email protected]" @attr ng-click="updateSelection(@m.Id)" />
                <label for="[email protected]">@m.ProviderName</label>
            </p>
        </div>
    }
</div>

so when i click on select all button it should check all check boxes and should hide the select all button it self(then show unselect all button), when i click on unselect all button it should uncheck all check boxes and hide the unselect button and show select all button.

when click on any of the check boxes it should show both the buttons.

what should i do using 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();
})

what i expect is all check box is checked it should not show select all button, if any one of the check box is unselected and others selected it should show both buttons.

Upvotes: 0

Views: 214

Answers (3)

hilda_sonica_vish
hilda_sonica_vish

Reputation: 757

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();

Upvotes: 1

vijayP
vijayP

Reputation: 11512

You were almost there. Try this:

$(function() {
    $('#providerall').click(function () {
        var checked = true;

        $('.checkbox').prop('checked', checked);

        $(this).hide(); //hide self
        $('#providernoone').show(); //show other button
    });

    $('#providernoone').click(function () {
        var checked = false;
        $('.checkbox').prop('checked', checked);
        $(this).hide();//hide self
        $('#providerall').show();//show other button
    });

    //manage visibility of button on individual checkbox click event
    $('.checkbox').click(function () {

        $('#providerall').show();
        $('#providernoone').show();

        var totalCheckboxCount = $('.checkbox').length;
        var totalCheckedInputs = $( ".checkbox:checked" ).length;
        if(totalCheckboxCount == totalCheckedInputs)
        {
            //all checkboxes are checked; so don't show select all button
            $('#providerall').hide();
        }
    });

})

Please check the lastly added piece of code for managing the visibility of the button on click of any individual checkbox.

Upvotes: 1

Ghanshyam Baravaliya
Ghanshyam Baravaliya

Reputation: 147

try this

// 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();
});

Upvotes: 1

Related Questions