Всем привет, есть такой код:
var label = document.querySelectorAll('.item-inner label[data-target]'),
labelInner = document.querySelectorAll('.form-two label[data-target]'),
itemDiv = document.querySelectorAll('.box-style'),
itemDivInner = document.querySelectorAll('.box'),
buttonPay = document.getElementById('payment_button'),
form = document.querySelector('.invoice'),
buttonForm = document.querySelector('.link-form');
function checkLabel(element, className) {
className.forEach(function(item) {
item.classList.remove('active');
});
var targetDiv = document.querySelector(element.getAttribute('data-target'));
targetDiv.classList.add('active');
}
label.forEach(function(checked) {
checked.addEventListener('click', function(e) {
checkLabel(this, itemDiv);
form.classList.add('show');
if (checked.getAttribute('for') === 'sub2') {
buttonPay.style.display = 'none';
} else {
buttonPay.style.display = 'inline-block';
}
});
});
labelInner.forEach(function(checked) {
checked.addEventListener('click', function(e) {
checkLabel(this, itemDivInner);
});
});
buttonForm.addEventListener('click', function(e) {
e.preventDefault();
labelInner.forEach(function(checked) {
if (checked.getAttribute('for') == 'sub6') {
checked.previousElementSibling.setAttribute('checked', 'checked');
checkLabel(checked, itemDivInner);
}
});
});
@charset "UTF-8";
/* ---------------------------------------------
Assets
--------------------------------------------- */
/* ---------------------------------------------
Colors
--------------------------------------------- */
/* ---------------------------------------------
Fonts
--------------------------------------------- */
/* ---------------------------------------------
Stylings
--------------------------------------------- */
html,
body {
height: 100%;
}
body {
padding: 0;
margin: 0;
width: 100%;
/*display: -webkit-box;*/
/*display: -moz-box;*/
/*display: box;*/
/*display: -webkit-flex;*/
/*display: -moz-flex;*/
/*display: -ms-flexbox;*/
/*display: flex;*/
/*-webkit-box-pack: center;*/
/*-moz-box-pack: center;*/
/*box-pack: center;*/
/*-webkit-justify-content: center;*/
/*-moz-justify-content: center;*/
/*-ms-justify-content: center;*/
/*-o-justify-content: center;*/
/*justify-content: center;*/
/*-ms-flex-pack: center;*/
/*-webkit-box-align: start;*/
/*-moz-box-align: start;*/
/*box-align: start;*/
/*-webkit-align-items: flex-start;*/
/*-moz-align-items: flex-start;*/
/*-ms-align-items: flex-start;*/
/*-o-align-items: flex-start;*/
/*align-items: flex-start;*/
/*-ms-flex-align: start;*/
background-color: #CCCC33;
font-family: "Roboto Condensed", sans-serif;
}
a {
color: #3f51b5;
}
a:hover {
text-decoration: none;
}
.body-wrap {
height: 100%;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/*@media (min-height: 580px) {*/
/*!*body {*!*/
/*!*-webkit-box-align: center;*!*/
/*!*-moz-box-align: center;*!*/
/*!*box-align: center;*!*/
/*!*-webkit-align-items: center;*!*/
/*!*-moz-align-items: center;*!*/
/*!*-ms-align-items: center;*!*/
/*!*-o-align-items: center;*!*/
/*!*align-items: center;*!*/
/*!*-ms-flex-align: center;*!*/
/*!*}*!*/
/*}*/
.container {
width: 100%;
max-width: 580px;
padding-right: 20px;
padding-left: 20px;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.invoice {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.13);
margin: 50px 0;
padding: 50px 30px 30px;
}
.invoice header {
margin-bottom: 30px;
}
.invoice header section {
position: relative;
width: 100%;
padding-top: 120px;
}
.invoice header section:nth-of-type(1) h1 {
/* float: left; */
text-align: center;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
color: #344760;
font-size: 25px;
margin-top: 20px;
margin-bottom: 5px;
}
.invoice header section:nth-of-type(1) span {
float: right;
color: #b7bcc3;
font-size: 14px;
margin-top: 10px;
letter-spacing: 2px;
}
.invoice header section:nth-of-type(1) .logo img {
position: absolute;
right: 0;
left: 0;
top: -35px;
margin: 0 auto;
content: "";
height: 140px;
}
.invoice header section:nth-of-type(2) {
float: right;
}
.invoice header section:nth-of-type(2) span {
font-size: 21px;
color: #b7bcc3;
letter-spacing: 1px;
}
.invoice header section:nth-of-type(2) span:before {
content: "#";
}
.invoice main {
border-left-width: 0px;
border-right-width: 0px;
padding-top: 0;
padding-bottom: 0;
}
.invoice footer {
text-align: right;
margin-top: 30px;
}
.invoice footer button {
display: inline-block;
padding-right: 0;
padding-left: 0;
background: none;
border: none;
font-size: 19px;
font-family: inherit;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
position: relative;
letter-spacing: 1px;
cursor: pointer;
outline: none;
color: #CCCC33;
}
.invoice footer button:focus {
border: none;
outline: none;
}
.invoice footer button:-moz-focus-inner {
border: none;
outline: none;
}
.invoice footer button:after {
content: "";
width: 0%;
height: 4px;
position: absolute;
right: 0;
bottom: -10px;
background-color: inherit;
-webkit-transition: width 0.2s ease-in-out;
-moz-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
}
.invoice footer button:hover:after {
width: 100%;
}
.invoice footer button:after {
background-color: #CCCC33;
}
.invoice footer button:disabled {
color: #b7bcc3;
cursor: not-allowed;
}
.invoice footer button:disabled:hover:after {
display: none;
}
.invoice footer button:disabled:after {
background-color: #b7bcc3;
}
.iframe {
display: block;
margin: 0 auto;
}
.inner h2 {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 2px;
color: #344760;
font-size: 20px;
text-align: center;
margin: 0 0 30px 0;
}
.inner input[type=text] {
border: none;
padding-top: 5px;
padding-bottom: 5px;
font-size: 16px;
line-height: 24px;
outline: none;
color: #344760;
width: 100%;
box-shadow: 0 1px 0 0 #b7bcc3;
transition: border-color .3s, box-shadow .3s;
}
.inner input[type=text]:focus {
border: none;
outline: none;
box-shadow: 0 1px 0 0 #CCCC33;
}
.inner input[type=text]::-moz-focus-inner {
border: none;
outline: none;
border-color: #CCCC33;
}
.inner textarea {
width: 100%;
text-align: left;
resize: none;
margin-top: 20px;
font-size: 16px;
border: none;
outline: none;
color: #344760;
box-shadow: 0 1px 0 0 #b7bcc3;
transition: border-color .3s, box-shadow .3s;
padding: 10px 10px 20px 5px;
min-height: 130px;
}
.inner textarea:focus {
border: none;
outline: none;
box-shadow: 0 1px 0 0 #CCCC33;
}
.item {
box-sizing: border-box;
width: 50%;
vertical-align: top;
padding-right: 10px;
display: inline-block;
margin-right: -4px;
text-align: center;
}
.form-item {
margin-bottom: 20px;
}
.form-item .rub {
vertical-align: bottom;
}
.form-item label {
display: inline-block;
margin-bottom: 10px;
font-weight: 600;
color: #344760;
}
.rub {
font-size: 17px;
color: #344760;
display: inline-block;
vertical-align: middle;
}
.input-sum {
display: inline-block;
vertical-align: middle;
height: 56px;
width: 110px;
}
.item label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
text-align: left;
}
.item label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 10px;
border: 1px solid #CCCC33;
position: absolute;
left: 0;
top: 0;
bottom: 1px;
}
.item input[type=radio] {
display: none;
}
.item input[type=radio]:checked + label:after {
position: absolute;
background-color: #CCCC33;
height: 10px;
width: 10px;
content: "";
display: inline-block;
left: 4px;
top: 4px;
border-radius: 50%;
}
.item input[type=radio]:checked + label > span {
border-bottom: 1px solid green;
}
.italic {
font-style: italic;
}
.box-style {
margin-top: 30px;
display: none;
}
.box {
margin-top: 30px;
display: none;
}
.box-style p {
line-height: 21px;
}
.box-style .col-item {
width: 50%;
display: inline-block;
padding: 0 5px;
margin-right: -4px;
box-sizing: border-box;
}
.active {
display: block;
}
.invoice.show footer button {
margin-top: -51px;
}
<div class="body-wrap">
<div class="container">
<form class="invoice">
<header>
<section>
<h1 class="invoice-title">Тип</h1>
</section>
</header>
<main>
<section class="inner">
<div class="item-inner">
<div class="item">
<input id="sub1" name="form" type="radio" value="">
<label for="sub1" data-target=".form-one"><span>Оплата</span>
</label>
</div>
<div class="item">
<input id="sub2" name="form" type="radio">
<label for="sub2" data-target=".form-two"><span>Оплата Другая</span>
</label>
</div>
</div>
<div class="box-style form-one">
<div class="form-item">
<label for="sub3">ФИО</label>
<input type="text" id="sub3" placeholder="Иванов Иван Иванович">
</div>
<div class="form-item">
<span class="input-sum">
<label for="sub4">Сумма</label>
<input type="text" id="sub4">
</span>
<span class="rub">₽</span>
</div>
</div>
<div class="box-style form-two">
<h2>выберите способ</h2>
<div class="item">
<input id="sub5" name="form1" type="radio" value="">
<label for="sub5" data-target=".form-three"><span>Карта</span>
</label>
</div>
<div class="item">
<input id="sub6" name="form1" type="radio">
<label for="sub6" data-target=".form-four"><span>Онлайн</span>
</label>
</div>
<div class="box form-three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet unde aperiam, rerum ab ipsa, dolore vitae dolor assumenda incidunt perferendis in recusandae officia necessitatibus nam soluta quas reiciendis ea.</p>
<p class="italic">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis error natus, voluptatem consequatur, rem, neque consectetur eligendi id, ipsa aut eius illo quasi voluptates placeat reprehenderit praesentium. Iure, eum, repudiandae.
<a href="#" class="link-form">форму</a>.</p>
</div>
<div class="box form-four">
Здесь есть форма
</div>
</div>
</section>
</main>
<footer>
<button type="submit" id="payment_button" disabled="">Оплатить</button>
</footer>
</form>
</div>
</div>
Не могу реализовать следующие. Открыв radiobutton 'Оплата другая' и дальше открыв кнопку 'Карта' там можно увидеть ссылку 'форму', кликая по ней должен открываться и становится активным соседний radiobutton 'Онлайн'. Я тут попробовал это реализовать, но не совсем то получилось. что надо, то есть тут при первом клике все отрабатывает нормально, соседний radiobutton становится активным и показывает что надо, но если переключится на другую вкладку и кликнуть опять то кнопка 'Онлайн' не становится активной. Можете подсказать пожалуйста. как лучше это реализовать?