Content output depending on active radio

Question

label { cursor: pointer; display: inline-block; margin: 0 10px; position: relative; } label > input { display: none; } .circle::before { content: ''; border: 2px solid #dfe4eb; border-radius: 50px; background: white; display: inline-block; width: 18px; height: 18px; position: relative; top: 5px; right: 5px; } .circle::after { content: ''; display: inline-block; border-radius: 50px; width: 12px; height: 12px; background: #dfe4eb; position: absolute; left: 0; top: 10px; z-index: 0; } input[type="radio"]:checked + .circle, .circle:hover { color: black; } input[type="radio"]:checked + .circle::before { content: ''; border-radius: 50px; background: #0093D8; display: inline-block; width: 12px; height: 12px; border: 5px solid white; box-shadow: 0 0 2px #0093D8; position: relative; z-index: 1; } .circle:hover::before { content: ''; border-radius: 50px; background: red; display: inline-block; width: 12px; height: 12px; border: 5px solid white; box-shadow: 0 0 2px red; position: relative; z-index: 2; }

  <label> <input type="radio" name="rb" checked> <span class="circle">Физические лица</span> </label> <label> <input type="radio" name="rb"> <span class="circle">Юридические лица</span> </label> <div>Контент для физических лиц, виден по умолчанию!</div> <div>А здесь контент для юридических лиц, виден, если выбраны юр.лица! Соответственно, блок контента для физ. лиц скрывается.</div>

And where is your code, how did you try to solve this situation?
I do not know how to solve on JS using the checked attribute.
Then it is best to write all your code in the question, except for those moments where you do not know how to do it.

Accepted Answer · 2018-02-14T13:13:17

 document.addEventListener('change', function(e){ if(!e.target.hasAttribute('data-type-legal')) return; a2.hidden = !a2.hidden a1.hidden = !a1.hidden }); if (document.documentElement.hidden === undefined) { Object.defineProperty(Element.prototype, "hidden", { set: function(value) { this.setAttribute('hidden', value); }, get: function() { return this.getAttribute('hidden'); } }); }

 label { cursor: pointer; display: inline-block; margin: 0 10px; position: relative; } label > input { display: none; } .circle::before { content: ''; border: 2px solid #dfe4eb; border-radius: 50px; background: white; display: inline-block; width: 18px; height: 18px; position: relative; top: 5px; right: 5px; } .circle::after { content: ''; display: inline-block; border-radius: 50px; width: 12px; height: 12px; background: #dfe4eb; position: absolute; left: 0; top: 10px; z-index: 0; } input[type="radio"]:checked + .circle, .circle:hover { color: black; } input[type="radio"]:checked + .circle::before { content: ''; border-radius: 50px; background: #0093D8; display: inline-block; width: 12px; height: 12px; border: 5px solid white; box-shadow: 0 0 2px #0093D8; position: relative; z-index: 1; } .circle:hover::before { content: ''; border-radius: 50px; background: red; display: inline-block; width: 12px; height: 12px; border: 5px solid white; box-shadow: 0 0 2px red; position: relative; z-index: 2; } [hidden] { display: none }

  <label> <input type="radio" name="rb" checked data-type-legal> <span class="circle">Физические лица</span> </label> <label> <input type="radio" name="rb" data-type-legal> <span class="circle">Юридические лица</span> </label> <div id="a1">Контент для физических лиц, виден по умолчанию!</div> <div id="a2" hidden>А здесь контент для юридических лиц, виден, если выбраны юр.лица! Соответственно, блок контента для физ. лиц скрывается.</div>

Not exactly, the content of legal entities should be hidden if an individual is active.
@ikar add only hidden attribute and logic a2.hidden =! a2.hidden ...
@ikar is necessary, someone needs IE11 -... In general, this should be indicated by asking a question, I am redoing the last time

Content output depending on active radio

1 answer 1

More articles: