Почему не обрабатывается первое нажатие на чекбокс?

Question

[Danil Privedentsev]

У меня есть такой код, который при нажатии на чекбокс выводит сообщение в консоль, но это не срабатывает при первом выборе чекбокса, а только при втором и далее. В чем может быть проблема?

$(document).ready(function() {
    
    let checkbox = "";

    function checkbox_add() {
        $("#foundation, #drop").on("change", function() {
          
          var isChecked1 = $("#foundation").prop("checked");
          var isChecked2 = $("#drop").prop("checked");
          
          if (isChecked1 && isChecked2) {
            checkbox = "Выбрано два чекбокса";
            console.log(checkbox);
          } else if (isChecked1) {
            checkbox = "Выбран 1 чекбокс";
            console.log(checkbox);
          } else if (isChecked2) {
            checkbox = "Выбран 2 чекбокс";
            console.log(checkbox);
          } else {
            checkbox = "Ничего не выбрано";
            console.log(checkbox);
          }
        });
    }
    $("#foundation, #drop").on('change', checkbox_add);
  });

Answer 1

[Вадим]

Так а зачем Вы дважды назначаете обработчик события?

Вы какой код написали, так он и работает. При первом change вы добавляете обработчик change, который уже в свою очередь работает с консолью.

$(document).ready(function() {
    
  let checkbox = "";

  function checkbox_add() {
        var isChecked1 = $("#foundation").prop("checked");
        var isChecked2 = $("#drop").prop("checked");
        
        if (isChecked1 && isChecked2) {
          checkbox = "Выбрано два чекбокса";
        } else if (isChecked1) {
          checkbox = "Выбран 1 чекбокс";
        } else if (isChecked2) {
          checkbox = "Выбран 2 чекбокс";
        } else {
          checkbox = "Ничего не выбрано";
        }

        console.log(checkbox);
  }

  $("#foundation, #drop").on('change', checkbox_add);
});

Comments

[Danil Privedentsev]

let buttom_home_price = "";
        let home_price = 0;
        $("#buttom-home-price input:checked").each(function(){
          buttom_home_price += $(this).val();
        });
        if (buttom_home_price == "OPTIUP") {
          home_price = home_price_optiup;
          $("#footer-text-price").text("Итоговая стоимость дома OPTI UP");
          $("#range").text("2.8");
        } else if (buttom_home_price == "OPTI") {
          home_price = home_price_opti;
          $("#footer-text-price").text("Итоговая стоимость дома OPTI");
          $("#range").text("2.6");
        }
    $("#buttom-home-price input").on('change', generator);

У меня есть такой код для кнопок, при нажатии на них, меняется содержимое id и все работает прекрасно.
Также работают радиокнопки, но не работают чекбоксы. Точнее все работает, но со второго нажатие на чекбокс :(

[Михаил Ливач]

Danil Privedentsev, Ввм же показали, в чём разница. А этот второй фрагмент кода неполный - нет кода обработчика ( функции generator() )