Javascript-форум - Показать сообщение отдельно

Сергей Ракипов · #10 (**permalink**) 14.10.2023, 19:07

Ни как не получается вот код

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Check input</title>

  <style>
    .margin_big {
  height: 1000px;
}

.margin_small {
  height: 200px;
}

.radio {
  margin: 60px 0px 0px 0px;
}

.form_radio {
  margin-bottom: 10px;
}

.form_radio input[type=radio] {
  display: none;
}

.form_radio label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 0;
  line-height: 18px;
  user-select: none;
}

.form_radio label:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 18px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background: url(https://q-control.ru/allant/picture/radio-1.png) 0 0 no-repeat;
}

/* Checked */
.form_radio input[type=radio]:checked+label:before {
  background: url(https://q-control.ru/allant/picture/radio-2.png) 0 0 no-repeat;
}

/* Hover */
.form_radio label:hover:before {
  filter: brightness(120%);
}

/* Disabled */
.form_radio input[type=radio]:disabled+label:before {
  filter: grayscale(100%);
}
.not_marked label:before{
  content: "";
  background: url(https://q-control.ru/allant/picture/radio-3.png) 0 0 no-repeat;
}
.padding{
  padding: 60px 0px 0px 0px;
}
  </style>
  </body>
</head>

<body>
  <form>
    <div class="form_radio">
      <input id="radio-1" type="radio" name="radio-1" value="1" class="check">
      <label for="radio-1">Radio button 1</label>
    </div>
    <div class="margin_small"></div>
    <div class="form_radio">
      <input id="radio-2" type="radio" name="radio-2" value="1" class="check">
      <label for="radio-2">Radio button 2</label>
    </div>
    <div class="margin_small"></div>
    <div class="form_radio">
      <input id="radio-3" type="radio" name="radio-3" value="1" class="check">
      <label for="radio-3">Radio button 3</label>
    </div>
    <div class="margin_small"></div>
    <div class="form_radio">
      <input id="radio-4" type="radio" name="radio-4" value="1" class="check">
      <label for="radio-4">Radio button 4</label>
    </div>
    <div class="margin_small"></div>
    <div class="form_radio">
      <input id="radio-5" type="radio" name="radio-4" value="1" class="check">
      <label for="radio-5">Radio button 4</label>
    </div>

    <div class="margin_big"></div>
    <button type="submit">Submit</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script type="text/javascript" src="https://q-control.ru/allant/js/jquery-1.11.1.min.js"></script>
  <script>
    document.querySelector('form').addEventListener('submit', function (event) {
      event.preventDefault(); // предотвращает отправку формы

      const radioButtons__1 = document.querySelectorAll("input[type='radio']");
      radioButtons__1.forEach(function (radioButton) {
        if (!radioButton.checked) { // если радиокнопка не отмечена
          radioButton.parentElement.classList.add("not_marked"); // добавляем класс not_marked к родительскому элементу радиокнопки
        }
      });

      event.preventDefault(); // предотвращает отправку формы
      var radioButtons__2 = document.querySelectorAll('.check');
      var firstUnchecked = null;
      for (var i = 0; i < radioButtons__2.length; i++) {
        if (!radioButtons__2[i].checked) { // если чекбокс не отмечен
          firstUnchecked = radioButtons__2[i]; // сохраняем первый неотмеченный чекбокс в переменную firstUnchecked
          break;
        }
      }
      if (firstUnchecked) { // если есть неотмеченные чекбоксы
        var parentDiv = firstUnchecked.parentElement; // сохраняем родительский элемент первого неотмеченного чекбокса в переменную parentDiv
        parentDiv.classList.add('padding'); // добавляем класс padding к родительскому элементу первого неотмеченного чекбокса
        $('html, body').animate({ // анимация прокрутки страницы к родительскому элементу первого неотмеченного чекбокса
          scrollTop: $(parentDiv).offset().top
        }, 500);
      }
    });

    var radioButtons = document.querySelectorAll('.check');
    radioButtons.forEach(function (radioButton) {
      radioButton.addEventListener('click', function () { // при клике на любую чекбокс кнопку
        var parentDiv = this.parentElement; // сохраняем родительский элемент чекбокса в переменную parentDiv
        parentDiv.classList.remove('padding'); // удаляем класс padding у родительского элемента этой чекбокс кнопки
      });
    });
  </script>
</body>

</html>

мне нужно что бы если name у радио кнопок один и тот же как примеру тут name="radio-4" он одинаковый, и когда была выбрана одна из этих кнопок где имя одно и тоже не чего не происходило.
Вот не чего же не происходит когда я выбираю радио кнопку к примеру name="radio-1" а когда не выбираю name="radio-1" меня скролик к ней Вот мне нужно если с одним и тем же именем я выбрал одну из кнопок то тоже не чего не происходило