Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2023, 16:41
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

проверка type="radio"
Как сделать что бы при нажатие на кнопку была проверка все ли нажаты радио батны, если что то не нажато к ней плавно подъехать(к самой верхней), с отступом в 60 пикселей и выделить каким нибудь цветом что они не выбраны.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Radio Button</title>
    <style>
      .test{
        height: 2000px;
      }
      .test2{
        height: 200px;
      }
    </style>
</head>
<body>
    <form>
        <input type="radio">
        <div class="test2"></div>
        <input type="radio">
        <div class="test2"></div>
        <input type="radio">
        <div class="test"></div>
        <button type="submit">Submit</button>
    </form>

    <script>
        const form = document.querySelector('form');
        const input = document.querySelector('input[type="radio"]');

        form.addEventListener('submit', (event) => {
            if (!input.checked) {
                event.preventDefault();
                input.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start',
                    inline: 'nearest',
                });
                input.style.marginTop = '60px';
            }
        });
    </script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2023, 16:42
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

И почему то этот scrollIntoView не работает
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2023, 17:18
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

CSS:

input[type="radio"] {
   scroll-margin-top: 10px;
}


JS:
const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  const firstCheckedElement = form.querySelector('input[type="radio"]:not(:checked)');
  
  if (firstCheckedElement !== null) {
  	event.preventDefault();
    firstCheckedElement.scrollIntoView({
      behavior: 'smooth',
    });
  }

});
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2023, 18:27
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,714

Зачем делать одиночные радиокнопки? Одиночными обычно чекбоксы бывают. А радио - это именно выбор одного из нескольких.
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2023, 19:40
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,714

Сообщение от Сергей Ракипов
И почему то этот scrollIntoView не работает
Если элемент и так виден, то он не будет прокручиваться. Тем более не будет никакой прокрутки, если высота страницы меньше высоты окна браузера.
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2023, 08:20
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

ruslan_mart,
А почему она не плавное едет а резко, и у самой в верхней нет отступа, только у тех кто ниже
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2023, 08:46
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

voraa,
Это я понимаю
Ответить с цитированием
  #8 (permalink)  
Старый 14.10.2023, 11:42
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,714

Сообщение от Сергей Ракипов
и у самой в верхней нет отступа
Вероятно "схлопывание" отступа между родительским и первым дочерним
https://developer.mozilla.org/ru/doc...gin_collapsing
Ответить с цитированием
  #9 (permalink)  
Старый 14.10.2023, 12:44
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Спасибо сделал то что нужно. Вот код вдруг кому понадобится. Если что спрашивайте.

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");
    }
  });

  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];
      break;
    }
  }
  if (firstUnchecked) {
    var parentDiv = firstUnchecked.parentElement;
    parentDiv.classList.add('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.classList.remove('padding');
  });
});
Ответить с цитированием
  #10 (permalink)  
Старый 14.10.2023, 19:07
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

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

<!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" меня скролик к ней Вот мне нужно если с одним и тем же именем я выбрал одну из кнопок то тоже не чего не происходило

Последний раз редактировалось Сергей Ракипов, 14.10.2023 в 19:26.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка, пока файл не будет готов headmaster911 AJAX и COMET 4 18.04.2017 08:44
Проверка полей <input type="radio" .javaNoob jQuery 3 09.12.2015 16:27
Проверка встроенной поддержки типа с помощью библиотеки Modernizr viy.li Общие вопросы Javascript 1 16.08.2013 12:02
проверка формы не работает в ie begelme Javascript под браузер 6 13.08.2013 01:00
Проверка данных формы составным условием? myafa Элементы интерфейса 8 01.04.2011 08:30