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

时间:2011-09-20 13:56:51

标签: javascript jquery onclick checkbox

例如,我有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;

3 个答案:

答案 0 :(得分:0)

您无法同时点击两个框。我会将onclick事件设置为您感兴趣的所有复选框,并且在该函数中,检查已检查的框,并根据您找到的组合进行适当的处​​理。

答案 1 :(得分:0)

下面是一个简单示例,说明如何使用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/

的示例

答案 2 :(得分:0)

您可能希望执行不同的任务,具体取决于该复选框的已检查状态? (我的意思是如果click1和checkbox2中的一个被点击但只检查了checkbox1那么做task1并且如果两者都做task2吗?)

您可以为两个复选框的“onclick”指定一个函数,并在其中编写简单逻辑:     if(getElementById(“checkbox1”)。checked&amp;&amp;!getElementById(“checkbox2”)。checked){         警报( “第一”);     } else if(getElementById(“checkbox1”)。checked&amp;&amp; getElementById(“checkbox2”)。checked){         警报( “双方”);     }