Show/Hide the part of the form based on checkbox selected?

Question

I have two checkboxes First and Second

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

    <br />

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

And form with three input content, name , phone , address .

    <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" required>
    </div>
    <div class="form-group col-md-6">
        <label for="">Phone</label>
        <input type="text" class="form-control" id="phone" name="phone" required>
    </div>
        <div class="form-group col-md-6">
        <label for="inputCity">Address</label>
        <input type="text" class="form-control" id="address" name="address" required>
    </div>
    </div>
    </form>

When the first checkbox is selected - display the first two content - name and phone , Similarly for the second checkbox if selected - display the last content - address

What I have tried:

https://jsfiddle.net/thorstorm1102/16hgpt0z/3/

I tried to hide the whole form:

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

    check1.onchange = function() {
    form1.classList.toggle("hidden");
    }

css

    .hidden {
    display: none;
    }

Any suggestions on how to show only first two content or last content depending on the checkbox selected?

Answer 1

I have added two options first in vanila js and second one is in jquery

    /*---- Plain JS----*/
    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";
      }
      else{
        document.querySelector("#name").closest('.form-group').style.display = "";
        document.querySelector("#phone").closest('.form-group').style.display = "";
      }
    }

/*----Jquery----*/
    $(document).on('change','#checkbox1',function(){
        if($(this).is(":checked")){
        $('#address').closest('.form-group').hide();
      }
      else{
        $('#address').closest('.form-group').show();
      }
    });

    $(document).on('change','#checkbox2',function(){
        if($(this).is(":checked")){
        $('#name').closest('.form-group').hide();
        $('#phone').closest('.form-group').hide();
      }
      else{
        $('#name').closest('.form-group').show();
        $('#phone').closest('.form-group').show();
      }
    });

https://jsfiddle.net/1zu0nsjr/

Answer 2

I used JQuery for something similar sometime back.

 function firstCheckBox() { $("#address1").hide(); $("#name1").show(); $("#phone1").show(); } function secondCheckBox() { $("#name1").hide(); $("#phone1").hide(); $("#address1").show(); }

 .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" name="checkbox1" id="checkbox1" value="checkbox1" onclick="firstCheckBox()" /> First <br /> <input type="checkbox" name="checkbox2" id="checkbox2" value="checkbox2" onclick="secondCheckBox()" /> Second <form id="f1"> <div class="form-row"> <div class="form-group col-md-6" id="name1"> <label for="first">Name</label> <input type="text" class="form-control" id="name" name="name" required> </div> <div class="form-group col-md-6" id="phone1"> <label for="">Phone</label> <input type="text" class="form-control" id="phone" name="phone" required> </div> <div class="form-group col-md-6" id="address1"> <label for="inputCity">Address</label> <input type="text" class="form-control" id="address" name="address" required> </div> </div> </form>

You can use input type = radio and have the same name for both of you want only 1 to be checked.

Hope this helps.

Answer 3

You need a radio button for this functionality

Radio buttons can only have one option picked at a time, that seems to be what you want you are not going to get the functionality you require with a checkbox, which by it's own design can have multiple options checked at the same time.

So for your HTML you can do the following

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My first website</title>
    <link rel="stylesheet" href="css-01/css/styles.css">
  </head>
  <body>
    <input type="radio" id="male" name="gender" value="male">
      <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label><br>


    <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" required>
        </div>
        <div class="form-group col-md-6">
          <label for="">Phone</label>
          <input type="text" class="form-control" id="phone" name="phone" required>
        </div>
          <div class="form-group col-md-6">
          <label for="inputCity">Address</label>
          <input type="text" class="form-control" id="address" name="address" required>

        </div>
      </div>
    </form>
  </body>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="custom.js"></script>
</html>

for your JS you can do the following.

$('#male').click(function() {
  $("#name").show();
  $("#phone").show();
  $("#address").hide();
});

$('#female').click(function() {
  $("#name").hide().
  $("#phone").hide().
  $("#address").show();
});