Javascript 是否根据选中的复选框获取选择输入的值？

我有两个复选框和一个表单（三个选择输入）-

名称

、

电话

和

地址

。 如果选择了

第一个复选框

，则会显示

姓名

和

电话

，如果选择了

第二个复选框

，则会显示

地址

表格：

css:

我想获得选中复选框的值。如果选中了

第一个复选框

，则获取

姓名和电话的值

，如果选中了

第二个复选框

，则获取

地址的值

我所尝试的：

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

---

但是如何仅获取选中值？

您可以使用属性选择器：

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

---

可以使用属性选择器：

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

---

首先，在UI中添加一个按钮，如：

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

在这里面，我们只需要检查是否选中了

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=函数（）{
如果（选中此项）{
document.querySelector（“#address”）.closest（'.form group'）.style.display=“无”；
}否则{
document.querySelector（“#address”）.closest（“.form group”）.style.display=“”；
}
}
check2.onchange=函数（）{
如果（选中此项）{
document.querySelector（“#name”）.closest（'.form group'）.style.display=“无”；
document.querySelector（“#phone”）.closest（'.form group'）.style.display=“无”；
}否则{
document.querySelector（“#name”）.closest（“.form group”）.style.display=“”；
document.querySelector（“#phone”）.closest（“.form group”）.style.display=“”；
}
}
document.querySelector（“btn”）.addEventListener（“单击”，函数（e）{
e、 预防默认值（）
控制台清除（）
var text=''；
如果（勾选2.勾选）{
text=document.querySelector（“#address”）.value
}else if（选中1.选中）{
text=document.querySelector（“#name”）.value+，'
text+=document.querySelector（“#phone”）.value
}  
console.log（文本）
});
.hidden{display:none；}

弗斯特
第二
名称
电话
地址
获取检查值
首先，在UI中添加一个按钮，如：

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

在这里面，我们只需要检查是否选中了
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=函数（）{
如果（选中此项）{
document.querySelector（“#address”）.closest（'.form group'）.style.display=“无”；
}否则{
document.querySelector（“#address”）.closest（“.form group”）.style.display=“”；
}
}
check2.onchange=函数（）{
如果（选中此项）{
document.querySelector（“#name”）.closest（'.form group'）.style.display=“无”；
document.querySelector（“#phone”）.closest（'.form group'）.style.display=“无”；
}否则{
document.querySelector（“#name”）.closest（“.form group”）.style.display=“”；
document.querySelector（“#phone”）.closest（“.form group”）.style.display=“”；
}
}
document.querySelector（“btn”）.addEventListener（“单击”，函数（e）{
e、 预防默认值（）
控制台清除（）
var text=''；
如果（勾选2.勾选）{
text=document.querySelector（“#address”）.value
}else if（选中1.选中）{
text=document.querySelector（“#name”）.value+，'
text+=document.querySelector（“#phone”）.value
}  
console.log（文本）
});
.hidden{display:none；}

弗斯特
第二
名称
电话
地址
获取检查值
您可以使用代码在
if（）
语句中获取值，还可以检查我在第二个代码段中使用的其他方法：


var form1=document.querySelector（“#f1”），
form2=document.querySelector（“#f2”），
check1=document.querySelector（#checkbox1”），
check2=document.querySelector（#checkbox2”）；
check1.onchange=函数（）{
如果（选中此项）{
document.querySelector（“#address”）.closest（“.form group”）.style.display=
“无”；
让name=$（“#name”）.val（）；
let phone=$（“#phone”）.val（）；
控制台日志（姓名、电话）；
}否则{
document.querySelector（“#address”）.closest（“.form group”）.style.display=
"";
}
};
check2.onchange=函数（）{
如果（选中此项）{
document.querySelector（“#name”）.closest（“.form group”）.style.display=
“无”；
document.querySelector（“#phone”）.closest（“.form group”）.style.display=
“无”；
let address=$（“#address”）.val（）；
控制台日志（地址）；
}否则{
document.querySelector（“#name”）.closest（“.form group”）.style.display=“”；
document.querySelector（“#phone”）.closest（“.form group”）.style.display=“”；
}
};
。隐藏{
显示：无；
}
首先


第二
名称
电话
地址
您可以使用代码在
if（）
语句中获取值，还可以检查我在第二个代码段中使用的其他方法：


var form1=document.querySelector（“#f1”），
form2=document.querySelector（“#f2”），
check1=document.querySelector（#checkbox1”），
check2=document.querySelector（#checkbox2”）；
check1.onchange=函数（）{
如果（选中此项）{
document.querySelector（“#address”）.closest（“.form group”）.style.display=
“无”；
让name=$（“#name”）.val（）；
let phone=$（“#phone”）.val（）；
var isChecked = document.getElementById('elementName').checked;