JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" class="disableCiti" /> First

<br />

<input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" class="citiInput" /> Second

<form id="f1">
<div class="form-row">

  <div class="form-group col-md-6">
    <label for="first">Name</label>
    <input type="text" class="form-control" id="name" name="name" value="john" required>
  </div>
  <div class="form-group col-md-6">
    <label for="">Phone</label>
    <input type="text" class="form-control" id="phone" name="phone" value="12345" required>
  </div>
    <div class="form-group col-md-6">
    <label for="inputCity">Address</label>
    <input type="text" class="form-control" id="address" name="address" value="berlin" required>
  </div>
</div>
</form>

CSS

.hidden {
  display: none;
}

JavaScript

var form1 = document.querySelector("#f1"),
    form2 = document.querySelector("#f2"),
    check1 = document.querySelector("#checkbox1"),
    check2 = document.querySelector("#checkbox2");

check1.onchange = function() {
	if(this.checked){
  	document.querySelector("#address").closest('.form-group').style.display = "none";
  }
  else{
  	document.querySelector("#address").closest('.form-group').style.display = "";
  }
}

check2.onchange = function() {
	if(this.checked){
  	document.querySelector("#name").closest('.form-group').style.display = "none";
    document.querySelector("#phone").closest('.form-group').style.display = "none";
    let name  = $("#name").val(); 
    let phone  = $("#phone").val(); 
    console.log();
  }
  else{
  	document.querySelector("#name").closest('.form-group').style.display = "";
    document.querySelector("#phone").closest('.form-group').style.display = "";
  }
}