I have the following asp:CheckBoxList's which get some values from a database.

<asp:CheckBoxList ID="chkExpType" runat="server" OnChange="javascript: SetFilterValuesToHiddenFields();" AutoPostBack="false" ClientIDMode="Static"></asp:CheckBoxList>



<asp:CheckBoxList ID="chkOrganism" runat="server" OnChange="javascript: SetFilterValuesToHiddenFields();" AutoPostBack="false" ClientIDMode="Static"></asp:CheckBoxList>

They both call the same Javascript function that follows in which I'm trying to check if the clicked checkbox of each CheckBoxList is the last selected one, in order to disallow users to deselect them. In simple words I'd like to always have at least one checked checkbox in each CheckBoxList. If there is at least one selected checkbox in both 2 categories I'd like to send a postback. If users try to deselect the last one in one of these categories I want to alert them and select back again the last deselected checkbox.

<script>

var lastSelectionForOrganism;

var lastSelectionForExpType;



function SetFilterValuesToHiddenFields() {



    var chkBoxExpType = document.getElementById('<%= chkExpType.ClientID %>');

    var options = chkBoxExpType.getElementsByTagName('input');

    var expTypeValues = "";

    for (var i = 0; i < options.length; i++) {

        if (options[i].checked) {

            expTypeValues = expTypeValues + "," + options[i].value;

        }

    }

    expTypeValues = expTypeValues.substring(1);

    if (expTypeValues.length === 1) {

        lastSelectionForExpType = expTypeValues;

    }



    var chkBoxOrganism = document.getElementById('<%= chkOrganism.ClientID %>');

    var options = chkBoxOrganism.getElementsByTagName('input');

    var organismValues = "";

    for (var i = 0; i < options.length; i++) {

        if (options[i].checked) {

            organismValues = organismValues + "," + options[i].value;

        }

    }

    organismValues = organismValues.substring(1);

    if (organismValues.length === 1) {

        lastSelectionForOrganism = organismValues;

    }





    if (hidfieldSelectedExpType.value && hidfieldSelectedOrganisms.value) {

        var val = "FilterChange";

        setTimeout(function () { __doPostBack(document.forms[0].name, val); }, 1);

    }

    else {

        if (lastSelectionForOrganism) {

            alert("last organism: " + lastSelectionForOrganism);

        }

        if (lastSelectionForExpType) {

            alert("last exp type: " + lastSelectionForExpType);

        }

    }



    return false;

}

</script>

The problem is that in my code I am able to get the value of the clicked Checkboxes after the click, which means that if the last one checkbox is clicked I get an undefined value because it becomes unchecked before I get its value.
Hope my explanation is not very messy. I'd appreciate any feedback.

EDIT:

Just in case it might be found useful to anyone else, I managed to implement the above logic using the following piece of code:

<script>

var lastCheckedOrganism;



var $checksOrganism = $('input[id^="chkOrganism"]').click(function(e) {

var numCheckedOrganism = $checksOrganism.filter(':checked').length;

if (numCheckedOrganism < 1) {

    alert("At least one organism should be selected.");

    lastCheckedOrganism = this;

    lastCheckedOrganism.checked = true;

    return false;

} else {

    //do postback

}

});

<script>

And exactly the same code for the second asp:CheckBoxList by changing only the following part:

$('input[id^="chkExpType"]')