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

Question

例如，我有 3 个复选框。我想根据选中的框的组合触发不同的事件。例如，我希望在单击复选框 1 时触发一个单击事件，并在单击复选框 1 和复选框 2 时触发一个不同的事件。

修订后的代码：

        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

下面是一个简单的示例，展示了如何使用 javascript 和 onclick 事件来确定选中哪些复选框。

<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>

这是一个示例 http://jsfiddle.net/T8YMh/5/

Answer 2

您不能同时单击两个框。我会将您感兴趣的所有复选框的 onclick 事件设置为相同，并在该函数中检查已选中哪些框，并根据您找到的组合进行适当的处​​理。

Answer 3

您可能想根据该复选框的选中状态执行不同的任务？ （我的意思是，如果单击了 checkbox1 和 checkbox2 之一，但仅选中了 checkbox1，则执行任务 1 并执行任务 2，如果两者都执行？）

您可以将一个函数分配给两个复选框的“onclick”并在其中编写简单的逻辑：
if (getElementById("checkbox1").checked && !getElementById("checkbox2").checked) {
警报（“第一”）；
} else if (getElementById("checkbox1").checked && getElementById("checkbox2").checked) {
警报（“两者”）；
}