Форум

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

Это код работает так если кнопка не выбрана, то идет к ней скролл и остальные помечаются что не выбранные.

но если у радио кнопок name один то а в этом случае выбрать можно только одну кнопку, то все равно будет скрол которая не выбрна, а так не нужно

voraa · #12 (**permalink**) 14.10.2023, 20:16

Проверять не только саму кнопку, но и другие с этим же именем.
Как то так.

<!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://rakipov.ru/public_htm/q-control/allant/picture/radio-1.png) 0 0 no-repeat;
}
 
/* Checked */
.form_radio input[type=radio]:checked+label:before {
  background: url(https://rakipov.ru/public_htm/q-control/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://rakipov.ru/public_htm/q-control/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>
    const form = document.querySelector('form');
    
    // Проверяем отмечена ли сама кнопка или другая с таким же именем
    const isCheck = (rbut) => {
        if (rbut.checked) return true;
        const rbuts = form.elements[rbut.name];
        if (rbuts.length>1) {
            for (let i=0; i<rbuts.length; i++)
                if (rbuts[i].checked) return true;
        }
        return false;
    }
    
    form.addEventListener('submit', function (event) {
      event.preventDefault(); // предотвращает отправку формы
 
      const radioButtons__1 = document.querySelectorAll("input[type='radio']");
      radioButtons__1.forEach(function (radioButton) {
        if (!isCheck(radioButton)) { // если радиокнопка не отмечена
          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 (! isCheck(radioButtons__2[i])) { // если чекбокс не отмечен
          firstUnchecked = radioButtons__2[i]; // сохраняем первый неотмеченный чекбокс в переменную firstUnchecked
          break;
        }
      }
      if (firstUnchecked) { // если есть неотмеченные чекбоксы
        var parentDiv = firstUnchecked.parentElement; // сохраняем родительский элемент первого неотмеченного чекбокса в переменную parentDiv
        parentDiv.classList.add('padding'); // добавляем класс padding к родительскому элементу первого неотмеченного чекбокса
        parentDiv.scrollIntoView({
            behavior: 'smooth'
        });
/*        $('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>

Зачем jquery, да еще две штуки?
scrollIntoView прекрасно работает.