Переключение radiobutton на Javascript

365

15 января 2017, 18:03

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

var inner = document.querySelector('.inner'), 
	 itemDiv = document.querySelectorAll('.box-style'); 
 
inner.addEventListener('click', function(e) { 
	var target = e.target; 
 
	if(target.tagName == 'LABEL') { 
 
		itemDiv.forEach(function(item){ 
			item.classList.remove('active'); 
		}); 
 
		var targetDiv = document.querySelector(target.getAttribute('data-target')); 
 
		targetDiv.classList.add('active'); 
	} 
 
});

@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; 
 
} 
 
.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; 
} 
.inner h2 { 
    text-transform: uppercase; 
    font-weight: 600; 
    letter-spacing: 2px; 
    color: #344760; 
    font-size: 20px; 
    margin-left: 5px; 
} 
.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: 35px; 
    display: inline-block; 
    margin-right: -4px; 
    text-align: center; 
} 
 
.item label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
} 
.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:before { 
    content: "\2022"; 
    color: #CCCC33; 
    font-size: 48px; 
    text-align: center; 
    background-color: #fff; 
    line-height: 19px; 
} 
.item input[type=radio]:checked + label > span { 
    border-bottom: 1px solid green; 
} 
.box-style { 
    margin-top: 30px; 
    display: none; 
} 
.box-style p { 
    line-height: 21px; 
} 
.box-style span { 
    width: 50%; 
    display: inline-block; 
    padding: 0 5px; 
    margin-right: -4px; 
    box-sizing: border-box; 
} 
.active { 
    display: block; 
}

<body> 
 
<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"> 
				<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 class="box-style form-one"> 
				<span><input type="text" placeholder="Ваше имя:"></span> 
				<span><input type="text" placeholder="Ваше фамилия:"></span> 
				<textarea name="form" placeholder="Напишите ваше сообщение"></textarea> 
			</div> 
			<div class="box-style form-two"> 
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti corrupti cupiditate maxime eos eveniet, ipsa ex nisi vero recusandae dolorum modi eius totam soluta, dolorem! Numquam eos commodi unde nam?</p> 
			</div> 
		</section> 
	</main> 
 
		  <footer> 
				<button type="submit" id="payment_button" disabled="">Оплатить онлайн</button> 
		  </footer> 
	 </form> 
	</div> 
</div> 
</body>

Логика такая, в зависимости от выбранного радиобаттона, показывать соответствующий блок.

Я здесь сделал через делегирование, то есть на родителя повесил обработчик. Тут в label есть data-target с тем блоком который надо показать. Но внутри label есть еще span, и вот по клику на нем ничего не происходит, я понимаю в чем причина, но как сделать правильно не совсем понимаю.

Можете пожалуйста подсказать, как мне сделать, чтобы кликая и на span внутри label тоже появлялись соответствующие блоки. Я знаю один способ, но это получится просто дубликация того же кода. Я надеюсь я доступно изъяснил свою проблему, а то это у меня не всегда хорошо получается)

Answer 1

У вас проблема в том, что вы ищите элемент по тегу label, а когда нажимаете на span, то оно уже не воспринимает его как label. Вам нужно именно нажатие на сам элемент

var label = document.querySelectorAll('label'), 
    itemDiv = document.querySelectorAll('.box-style'); 
 
label.forEach(function(checked) { 
  checked.addEventListener("click", function(event) { 
 
    itemDiv.forEach(function(item){ 
      item.classList.remove('active'); 
    }); 
 
    var targetDiv = document.querySelector(this.getAttribute('data-target')); 
 
    targetDiv.classList.add('active'); 
  }); 
});

@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; 
 
} 
 
.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; 
} 
.inner h2 { 
    text-transform: uppercase; 
    font-weight: 600; 
    letter-spacing: 2px; 
    color: #344760; 
    font-size: 20px; 
    margin-left: 5px; 
} 
.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: 35px; 
    display: inline-block; 
    margin-right: -4px; 
    text-align: center; 
} 
 
.item label { 
    display: inline-block; 
    cursor: pointer; 
    position: relative; 
    padding-left: 25px; 
} 
.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:before { 
    content: "\2022"; 
    color: #CCCC33; 
    font-size: 48px; 
    text-align: center; 
    background-color: #fff; 
    line-height: 19px; 
} 
.item input[type=radio]:checked + label > span { 
    border-bottom: 1px solid green; 
} 
.box-style { 
    margin-top: 30px; 
    display: none; 
} 
.box-style p { 
    line-height: 21px; 
} 
.box-style span { 
    width: 50%; 
    display: inline-block; 
    padding: 0 5px; 
    margin-right: -4px; 
    box-sizing: border-box; 
} 
.active { 
    display: block; 
}

<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"> 
              <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 class="box-style form-one"> 
            <span><input type="text" placeholder="Ваше имя:"></span> 
            <span><input type="text" placeholder="Ваше фамилия:"></span> 
            <textarea name="form" placeholder="Напишите ваше сообщение"></textarea> 
          </div> 
          <div class="box-style form-two"> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti corrupti cupiditate maxime eos eveniet, ipsa ex nisi vero recusandae dolorum modi eius totam soluta, dolorem! Numquam eos commodi unde nam?</p> 
          </div> 
        </section> 
      </main> 
 
      <footer> 
        <button type="submit" id="payment_button" disabled="">Оплатить онлайн</button> 
      </footer> 
    </form> 
  </div> 
</div>