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

Question

У меня есть два флажка и форма (три входа для выбора) - name, phone и address. Если выбрано first checkbox - будут отображаться name и phone, а если выбрано second checkbox - отобразится address.

Форма:

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

Я хочу получить значения выбранного флажка . Если выбрано first checkbox - получить значения name and phone и если выбрано second checkbox - получить значения address

То, что я пробовал:

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

Но как получить только проверенные значения?

Answer 1

Обычно значения флажков являются логическими значениями, вы можете проверить, установлен ли флажок;

var isChecked = document.getElementById('elementName').checked;

В результате переменная isChecked имеет нужное вам значение true / false.

Answer 2

Итак, сначала добавьте кнопку в пользовательский интерфейс, например:

<div class="form-group col-sm-12">
   <button id="btn" class="btn btn-sm btn-primary">Get Checked Values</button>
</div>

, а затем добавьте addEventListener для этой кнопки, например:

document.querySelector("#btn").addEventListener("click", function(e){
    // Our code logic here...
});

Внутри этого нам просто нужно чтобы проверить, проверено ли check1 или check2, и на основе этого получить соответствующие значения элементов, например:

if (check2.checked) {
    // If second checkbox is selcted - get values of `address`
    text = document.querySelector("#address").value

} else if (check1.checked){
    // If first checkbox is selected - get values of `name` and `phone` 
    text = document.querySelector("#name").value + ', '
    text += document.querySelector("#phone").value
}

Рабочая демонстрация:

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

document.querySelector("#btn").addEventListener("click", function(e){
	e.preventDefault()
  console.clear()
  var text = '';
  if (check2.checked) {
    text = document.querySelector("#address").value
  } else if (check1.checked){
  	text = document.querySelector("#name").value + ', '
    text += document.querySelector("#phone").value
  }  
  console.log(text)
});

.hidden { display: none;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="checkbox1" value="option1">
  <label class="form-check-label" for="checkbox1">First</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="checkbox2" value="option2">
  <label class="form-check-label" for="checkbox2">Second</label>
</div>
<form id="f1">
  <div class="form-row">
    <div class="form-group col-sm-6">
      <label for="first">Name</label>
      <input type="text" class="form-control form-control-sm" id="name" name="name" value="john" required>
    </div>
    <div class="form-group col-sm-6">
      <label for="">Phone</label>
      <input type="text" class="form-control form-control-sm" id="phone" name="phone" value="12345" required>
    </div>
    <div class="form-group col-sm-6">
      <label for="inputCity">Address</label>
      <input type="text" class="form-control form-control-sm" id="address" name="address" value="berlin" required>
    </div>
    <div class="form-group col-sm-12">
      <button id="btn" class="btn btn-sm btn-primary">Get Checked Values</button>
    </div>
  </div>
</form>

Answer 3

вы можете использовать код для получения значения внутри оператора if(), а также проверить другой подход, который я использую во втором фрагменте:

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";
    let name = $("#name").val();
    let phone = $("#phone").val();
    console.log(name, phone);
    
  } 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 address = $("#address").val();
    console.log(address);
  } else {
    document.querySelector("#name").closest(".form-group").style.display = "";
    document.querySelector("#phone").closest(".form-group").style.display = "";
  }
};

.hidden {
  display: none;
}

<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>
<script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>

Другой подход, я предлагаю вам использовать переключатель:

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

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

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

.hidden {
  display: none;
}

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

<br />

<input type="radio" name="dynamicFields" id="checkbox2" value="2" 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>
<script
  src="https://code.jquery.com/jquery-3.5.0.min.js"
  integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
  crossorigin="anonymous"></script>

Answer 4

Вы можете использовать селектор атрибутов:

var name1 = $('input[name="checkbox1"]:checked').val();
var name2 = $('input[name="checkbox2"]:checked').val();

Другой подход:

if ($('#checkbox1').prop("checked"))
var name1 = $("#checkbox1").val();
if ($('#checkbox2').prop("checked"))
var name2 = $("#checkbox2").val();