Показать / скрыть часть формы на основе установленного флажка?

Question

У меня есть два флажка First и Second

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

    <br />

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

и form с тремя входными данными, 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>

Когда установлен флажок first - отображать first two content - name и phone. Аналогично для флажка second, если он установлен - отображать last content - address

Что я пробовал:

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

Я пытался скрыть всю форму:

    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;
    }

Есть предложения, как отображать только первые два контента или последний контент в зависимости от установленного флажка?

Answer 1

Я добавил две опции: первая - в vanila js, вторая - в 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

Я когда-то использовал JQuery для чего-то подобного.

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>

Вы можете использовать input type = radio и иметь одно и то же имя для вас обоих, хотите, чтобы проверялось только 1.

Надежда это помогает.

Answer 3

Вам нужен переключатель для этой функции

Радиокнопки могут иметь только один вариант, выбранный за раз, это похоже на то, что вы хотите, вы не получите требуемых функций с флажком, который по своей собственной конструкции может иметь несколько вариантов, проверенных одновременно.

Итак, для вашего HTML вы можете сделать следующее

<!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>

для своего JS вы можете сделать следующие.

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

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