Захват события клика по комбинации флажков

Question

Например, у меня есть 3 флажка.Я хочу запускать разные базы событий на комбинации отмеченных флажков.Например, я хочу, чтобы при щелчке по флажку 1 срабатывало событие щелчка, а при щелчке и флажок 1, и флажок 2 .

ПЕРЕСМОТРЕННЫЙ КОД: * 1007.*

        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

может быть вы хотите выполнять разные задачи в зависимости от отмеченных статусов этих флажков? (Я имею в виду, если один из флажков1 и флажок2 нажаты, но отмечен только флажок1, выполните задание 1 и выполните задание 2, если оба?)

Вы можете назначить одну функцию для «onclick» обоих флажков и написать в ней простую логику: if (getElementById ("checkbox1"). check &&! getElementById ("checkbox2"). check) { предупреждение ( "первый"); } else if (getElementById ("checkbox1"). check && getElementById ("checkbox2"). check) { предупреждение ( "как"); }

Answer 3

Вы не можете щелкнуть два поля одновременно.Я бы установил одно и то же событие onclick для всех интересующих вас флажков, и в этой функции проверяю, какие флажки были отмечены, и выполняю соответствующую обработку на основе найденной комбинации.