I have two checkboxes and a form(three select inputs) - `name`,`phone` and `address`.
If `first checkbox` is selected - `name` and `phone` will be displayed and if `second checkbox` is selected - `address` will be displayed.

Form:

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

```

Jquery:

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

```

css:

```
    .hidden {
    display: none;
    }

```

<https://jsfiddle.net/thorstorm1102/tg4Lokz6/3/>

I want to get the values of the selected checkbox. If `first checkbox` is selected - get values of `name and phone` and if `second checkbox` is selcted - get values of `address`

What i have tried:

```
   var name = $("#name").val(); 

```

But how to get only checked values?