开发者

Capturing click event on combination of checkboxes

开发者 https://www.devze.com 2023-04-05 23:26 出处:网络
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 ev

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");
                tSale开发者_如何学编程sProPlus.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;


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/


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.


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"); }

0

精彩评论

暂无评论...
验证码 换一张
取 消