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