根据选中的复选框获取 select 输入的值？

Question

我有两个复选框和一个表单（三个 select 输入） - 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 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();

Answer 2

因此，首先，向 UI 添加一个按钮，例如：

<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

通常checkbox的值为boolean的值，可以勾选checkbox是否勾选；

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

结果，“isChecked”变量具有您需要的真/假。