JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div id="myRadio">
  <div class="condition">
    <input type="radio" name="test" checked="checked" value="Y" id="first" />
    <label for="first">First</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="N" id="second" />
    <label for="second">Second</label>
  </div>
  <div class="condition">
    <input type="radio" name="test" value="YN" id="third" />
    <label for="third">Third</label>
  </div>
</div>

<div id="testY" class="desc">
  <label for="name">Name</label>
  <input type="text" id="name" />
</div>

<div id="testN" class="desc" style="display:none">
  <label for="add">Add</label>
  <input type="text" id="add" />
  <label for="date">Date</label>
  <input type="date" id="date" />
</div>

<div id="testYN" class="desc" style="display:none">
  <label for="hobby">Hobby</label>
  <input type="text" id="hobby" />
</div>
<br>
<button class="check">Check</button>

JavaScript

$("input[name$='test']").click(function() {
  var test = $(this).val();
  $("div.desc").hide();
  $("div.desc input").val("");
  $("#test" + test).show();
});

$(".check").click(function(){
	let checked = $("input[name$='test']:checked").val();
  let inputs = $("#test" + checked).find('input');

	let valid = 0
  $.each(inputs, (index, input) => {
  	let val = $(input).val();
    if(!val){
      $(input).css('border', '1px solid red');
    } else {
    	valid++;
    }
  })

  if (valid === inputs.length) {
  	alert('success');
  }
})