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();
  $("#test" + test).show();
});

$(".check").click(function(){
	let checked = $("input[name$='test']:checked").val();
    let input = $("#test" + checked).find('input');
    let val = input.val();
    if(!val){
      $(input).css('border', '1px solid red');
      return false
    }
    alert('success');
    return true
})