在复选框组合上捕获点击事件

Question

For example, I have 3 checkboxes. I want to trigger different events bases on combinations of boxes being checked. For instance, I want an click event triggered on clicking checkbox 1 and a different event based on clicking both checkbox 1 and checkbox 2 .

REVISED CODE:

        var tSalesPro = document.getElementById("chkSalesPro");
        var tSalesProPlus = document.getElementById("chkSalesProPlus");
        var tTellerPro = document.getElementById("chkTellerPro");

        function checkBoxChecked() {

            if (tSalesPro.checked && tSalesProPlus.checked && tTellerPro.checked) {
                alert("checkboxes all checked");
            }
            else if (tSalesPro.checked && tSalesProPlus.checked) {
                alert("checkbox 1 & 2 checked");
            }
            else if (tSalesProPlus.checked && tTellerPro.checked) {
                alert("checkbox 2 & 3 checked");
                tSalesProPlus.show();
                tSalesPro.hide();
                tTellerPro.hide();
                tSalesProPlus.checked = false;
                tTellerPro.checked = false;
            }
            else if (tSalesPro.checked && tTellerPro.checked) {
                alert("checkbox 1 & 3 checked");
                tSalesPro.show();
                tSalesPro.hide();
                tSalesProPlus();
                tSalesPro.checked = false;
                tSalesProPlus.checked = false;
            }
            else if (tSalesPro.checked) {
                alert("checkbox 1 checked");
                tSalesPro.show();
                tSalesProPlus.hide();
                tTellerPro.hide();
                tSalesProPlus.checked = false;
                tTellerPro.checked = false;
            }
            else if (tSalesProPlus.checked) {
                alert("checkbox 2 checked");
                tSalesProPlus.show();
                tSalesPro.hide();
                tTellerPro.hide()
                tSalesPro.checked = false;
                tTellerPro.checked = false;
            }
            else if (tTellerPro.checked) {
                alert("checkbox 3 checked");
                tTellerPro.show();
                tSalesPro.hide();
                tSalesProPlus();
                tSalesPro.checked = false;
                tSalesProPlus.checked = false;
            }
        }

        tSalesPro.onclick = checkBoxChecked;
        tSalesProPlus.onclick = checkBoxChecked;
        tTellerPro.onclick = checkBoxChecked;

Answer 1

You can't click two boxes at the same time. I would set the onclick event to be the same for all of the check boxes you're interested in, and in that function, inspect which boxes have been checked and do the appropriate processing based on that combination you find.

Answer 2

Below is a simple example of showing how to use javascript and onclick events in order to determine which checkboxes are checked.

<input type="checkbox" id="chkSalesPro">
<input type="checkbox" id="chkSalesProPlus">
<input type="checkbox" id="chkTellerPro">


<script type="text/javascript">
$(document).ready(function () {

     function checkBoxChecked() {
       var tSalesPro = $("#chkSalesPro");
       var tSalesProPlus = $("#chkSalesProPlus");
       var tTellerPro = $("#chkTellerPro");

       if (tSalesPro[0].checked && tSalesProPlus[0].checked && tTellerPro[0].checked) {
           alert("checkboxes all checked");
       }
       else if (tSalesPro[0].checked && tSalesProPlus[0].checked) {
           alert("checkbox 1 & 2 checked");
       } 
       else if (tSalesProPlus[0].checked && tTellerPro[0].checked) {
           alert("checkbox 2 & 3 checked");
       }
       else if (tSalesPro[0].checked && tTellerPro[0].checked) {
           alert("checkbox 1 & 3 checked");
       }
       else if (tSalesPro[0].checked) {
           alert("checkbox 1 checked");
       }
       else if (tSalesProPlus[0].checked) {
           alert("checkbox 2 checked");
       }
       else if (tTellerPro[0].checked) {
           alert("checkbox 3 checked");
       }
   };
   $("#chkSalesPro, #chkSalesProPlus, #chkTellerPro").change(checkBoxChecked);
});
</script>

Here is an example http://jsfiddle.net/T8YMh/5/

Answer 3

may be you want to perform different tasks depending on checked statuses of that checkboxes? ( i mean if one of checkbox1 and checkbox2 clicked but only checkbox1 is checked do task1 and do task2 if both?)

You can assign one function to "onclick" of both checkboxes and write simple logic in it: if (getElementById("checkbox1").checked && !getElementById("checkbox2").checked) { alert("first"); } else if (getElementById("checkbox1").checked && getElementById("checkbox2").checked) { alert("both"); }