Скрипт работает не так, как нужно

@Steisi1982 · Регистрация: 16.05.2018

Author24 — интернет-сервис помощи студентам

Мой html:

HTML5

<form  method="post" name="calcForm" id="calcForm" action="">
  <fieldset>
    <input type="checkbox" id="calcFormFieldsetCheckbox1" checked>
    <span>Пункт 1 
      <input class="calcFormFieldsetInpNum" id="calcFormFieldsetInpNum1" type="number" name="" value="1"> вариант(ов) 
      <span id="calcFormSketchResult"></span>
    </span>
    <br>
    <input type="checkbox" id="calcFormFieldsetCheckbox1" checked>
    <span>Пункт 2 
      <input class="calcFormFieldsetInpNum" id="calcFormFieldsetInpNum1" type="number" name="" value="1"> вариант(ов) 
      <span id="calcFormSketchResult"></span>
    </span>
    <br>
    <input type="checkbox" id="calcFormFieldsetCheckbox1" checked>
    <span>Пункт 3 
      <input class="calcFormFieldsetInpNum" id="calcFormFieldsetInpNum1" type="number" name="" value="1"> вариант(ов) 
      <span id="calcFormSketchResult"></span>
    </span>
    <br>
    <input type="checkbox" id="calcFormFieldsetCheckbox1" checked>
    <span>Пункт 4 
      <input class="calcFormFieldsetInpNum" id="calcFormFieldsetInpNum1" type="number" name="" value="1"> вариант(ов) 
      <span id="calcFormSketchResult"></span>
    </span>
  </fieldset>
</form>

Скрипт:

Javascript

$("#calcForm input[type=checkbox]").on("change", function() {
   $("#calcForm input[type=checkbox]").each(function(){
      if ($(this).is(':checked')) {
          $(this).next().css("color", "red");
      }else{
          $(this).next().css("color", "black");
      }
   });
});

Нужно чтобы, при снятии галочки в одном из чекбоксов, скрипт проходил по всем чекбоксам в форме, проверяя включен ли текущий чекбокс. И, в зависимости от результата, должен изменяться цвет текста только следующего за измененным чекбоксом спана. Но у меня сначала это применяется ко всем спанам, и только при последующих нажатиях, все работает как надо. Уже всю голову сломала. Что не так? Помогите пожалуйста

@shvyrevvg · 31.08.2019, 08:33

Steisi1982, ничего не понял

Сообщение от Steisi1982

и только при последующих нажатиях, все работает как надо.

Может дело в том что у Вас код проверки запускается только после нажатия на чекбокс(после события change).

Javascript

$("#calcForm input[type=checkbox]")
  .on("change", function() {
    $("#calcForm input[type=checkbox]").each(function(){
      if ($(this).is(':checked')) {
        $(this).next().css("color", "red");
      }else{
        $(this).next().css("color", "black");
      }
    });
  })
  .trigger("change");

	31.08.2019, 08:33

Скрипт работает не так, как нужно

Решение