0

Всем привет, есть такой код:

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">&#8381;</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 становится активным и показывает что надо, но если переключится на другую вкладку и кликнуть опять то кнопка 'Онлайн' не становится активной. Можете подсказать пожалуйста. как лучше это реализовать?

4
  • Зачем вы всё так усложнили? Вы могли эти же функции без скриптов сделать
    – Yuri
    18 янв 2017 в 21:12
  • <a href="#" class="link-form" onclick="document.getElementById('sub6').click()">форму</a> - способ костыльный, но проблему решает
    – Buka
    18 янв 2017 в 21:34
  • Я изменил свой ответ добавив вариант с вашим скриптом. Смотрите
    – Yuri
    19 янв 2017 в 6:54
  • @Yuri спасибо в который раз за помощь!)
    – Lorax
    19 янв 2017 в 7:19

1 ответ 1

0

Установленный вами атрибут checked ещё не означает, что input'y будет установлен флажок. Для таких целей используйте стандартную функцию elem.checked = true:

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.checked = true;
      checkLabel(checked, itemDivInner);
    };
  });
});
@charset "UTF-8";

html,
body {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  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;
}

.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">&#8381;</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>

Предлагаю ещё такой рабочий вариант, который не требует использования скриптов:

@charset "UTF-8";

html,
body {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  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;
}
.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 {
  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;
}
input[type=radio] {
  display: none;
}
.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 .link {
  color: #3f51b5;
  text-decoration: underline;
  cursor: pointer;
}
.box-style .link:hover {
  text-decoration: none;
}
.box-style .col-item {
  width: 50%;
  display: inline-block;
  padding: 0 5px;
  margin-right: -4px;
  box-sizing: border-box;
}
.invoice.show footer button {
  margin-top: -51px;
}
.inner label:after {
  display: none;
  position: absolute;
  background-color: #CCCC33;
  height: 10px;
  width: 10px;
  content: "";
  left: 4px;
  top: 4px;
  border-radius: 50%;
}
#sub1:checked ~ .form-one {
  display: block;
}
#sub1:checked ~ .item-inner .item label[for="sub1"] > span {
  border-bottom: 1px solid green;
}
#sub1:checked ~ .item-inner .item label[for="sub1"]:after {
  display: inline-block;
}
#sub2:checked ~ .form-two {
  display: block;
}
#sub2:checked ~ .item-inner .item label[for="sub2"] > span {
  border-bottom: 1px solid green;
}
#sub2:checked ~ .item-inner .item label[for="sub2"]:after {
  display: inline-block;
}
#sub5:checked ~ .form-two .form-three {
  display: block;
}
#sub5:checked ~ .form-two .item label[for="sub5"] > span {
  border-bottom: 1px solid green;
}
#sub5:checked ~ .form-two .item label[for="sub5"]:after {
  display: inline-block;
}
#sub6:checked ~ .form-two .form-four {
  display: block;
}
#sub6:checked ~ .form-two .item label[for="sub6"] > span {
  border-bottom: 1px solid green;
}
#sub6:checked ~ .form-two .item label[for="sub6"]:after {
  display: inline-block;
}
<div class="body-wrap">
  <div class="container">
    <form class="invoice">
      <header>
        <section>
          <h1 class="invoice-title">Тип</h1>
        </section>
      </header>
      <main>
        <section class="inner">
          <input id="sub1" name="form" type="radio" value="">
          <input id="sub2" name="form" type="radio">
          <input id="sub5" name="form1" type="radio" value="">
          <input id="sub6" name="form1" type="radio">
          <div class="item-inner">
            <div class="item">
              <label for="sub1"><span>Оплата</span>
              </label>
            </div>
            <div class="item">
              <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">&#8381;</span>
            </div>
          </div>
          <div class="box-style form-two">
            <h2>выберите способ</h2>
            <div class="item">
              <label for="sub5"><span>Карта</span>
              </label>
            </div>
            <div class="item">
              <label for="sub6"><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.
                <label for="sub6" class="link-form link">форму</label>.</p>
            </div>
            <div class="box form-four">
              Здесь есть форма
            </div>
          </div>
        </section>
      </main>

      <footer>
        <button type="submit" id="payment_button" disabled="">Оплатить</button>
      </footer>
    </form>
  </div>
</div>

2
  • спасибо в который раз за помощь!)
    – Lorax
    19 янв 2017 в 7:19
  • @Lorax, не за что :)
    – Yuri
    19 янв 2017 в 7:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.