根据选中的复选框显示/隐藏表单的一部分？

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