时间戳

首页 > 解决方案 > 如何在javascript中获取多个复选框的值

javascript - 如何在javascript中获取多个复选框的值

问题描述

我正在尝试获取复选框的值以显示在我们的页面上

<div class="form-check form-check-inline">
    <input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" value="JAVA">
    <label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input skill" type="checkbox" id="inlineCheckbox2" value="HTML">
    <label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input skill" type="checkbox" id="inlineCheckbox3" value="CSS" >
    <label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>

标签： javascripthtmlformsdom

解决方案

<html>
<body>

<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox1" name="checkbox" value="JAVA">
<label class="form-check-label" for="inlineCheckbox1">JAVA</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox2"  name="checkbox" value="HTML">
<label class="form-check-label" for="inlineCheckbox2">HTML</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input skill" type="checkbox" id="inlineCheckbox3"  name="checkbox" value="CSS" >
<label class="form-check-label" for="inlineCheckbox3">CSS</label>
</div>   




<button id="btn">Submit</button> <br>

<script>
document.getElementById('btn').onclick = function() {
var checkbox;
for (checkbox of document.getElementsByName('checkbox')) {
if (checkbox.checked)
document.body.append(checkbox.value + ' ');
}
}
</script>

</body>
</html>

推荐阅读