在变量中使用基于选中的复选框的值

Question

我想创建一个变量，它的值为 1 或多个复选框，基于选择的一个。 这是我现在想出的：

 var checkbox1 = document.getElementById("value1"); var checkbox2 = document.getElementById("value2"); var checkbox3 = document.getElementById("value3"); var showvalue = document.getElementById("show-value"); document.querySelectorAll('input[type=checkbox]').forEach(box => box.addEventListener('change', showValue)); function showValue() { if (checkbox1.checked === true) { showvalue.value = checkbox1.value; } }

 <input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label> <input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label> <input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label> <input id="show-value" type="hidden"/>

但我不知道如何遍历复选框，如果选中了特定的复选框，请将其添加到变量showvalue 。 所以我想要的showvalue是这样的（基于选中的复选框）：

var showvalue = checkbox1.value + ", " + checkbox2.value + ", " + checkbox3.value;

如何遍历复选框，然后如果选中 = true 则将该值添加到showvalue ？

Answer 1

为了显示，我从显示值输入字段中删除隐藏并将其设置为只读。

为了计算结果，我 go 使用 foreach 通过复选框，如果选中，则将值添加到结果字符串中。 分隔符,仅在已有部分结果时设置。 在此之后，最后只需从 showvalue 更新值。

 var checkbox1 = document.getElementById("value1"); var checkbox2 = document.getElementById("value2"); var checkbox3 = document.getElementById("value3"); var showvalue = document.getElementById("show-value"); document.querySelectorAll('input[type=checkbox]').forEach(box => box.addEventListener('change', showValue)); function showValue() { let value = ''; document.querySelectorAll('input[type=checkbox]').forEach(box => { if (box.checked === true) { if (value.length) value += ', '; value += box.value; } }); showvalue.value = value; }

 .readonly { background: yellow;}

 <input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label> <input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label> <input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label> <input id="show-value" size=40 class="readonly" readonly/>

Answer 2

document.querySelectorAll('input[type=checkbox]')
.forEach(box => box.addEventListener('input', showValue));
function showValue(event) {
    var input = event.target;
    var showvalue = document.getElementById('show-value');
    showvalue.value += input.value;
  // tern if statment
    input.checked ? showvalue.type = 'text' : showvalue.type = 'hidden';
  // you can used the original if statment
    if (input.checked) {
      showvalue.type = 'text';
    } else {
      showvalue.type = 'hidden';
    }
 }

Answer 3

这就是你要找的吗？

 var checkbox1 = document.getElementById("value1"); var checkbox2 = document.getElementById("value2"); var checkbox3 = document.getElementById("value3"); document.querySelectorAll('input[type=checkbox]').forEach(box => box.addEventListener('change', showValue)); function showValue() { if (checkbox1.checked === true) { var box1 = checkbox1.value; }else{ var box1 = ''; } if (checkbox2.checked === true) { var box2 = checkbox2.value; }else{ var box2 = ''; } if (checkbox3.checked === true) { var box3 = checkbox3.value; }else{ var box3 = ''; } document.getElementById("show").value = box1 + ';' + box2 + ';' + box3; }

 <input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label> <input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label> <input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label> <input id="show" class="readonly" readonly/>

Answer 4

你可以试试这个：

 var showvalue = document.getElementById("show-value"); var checkboxes = document.querySelectorAll('input[type=checkbox]'); checkboxes.forEach(box => box.addEventListener('change', showValue)); function showValue() { showvalue.value = Array.from(checkboxes).map(e => e.checked? e.value: null).filter(Boolean).join(", "); }

 <input id="value1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label> <input id="value2" type="checkbox" value="6 maanden"><label for="value2">Value 2</label> <input id="value3" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label> <input id="show-value" type="text"/>

Answer 5

只需使用 querySelector 并使用 name 属性来检查是否检查了什么。 一个例子：

 let result = []; const setup = () => { const entry1 = document.querySelectorAll('[name="entry1"]'); entry1.forEach(input => input.addEventListener('change', onChange)); } const onChange = () => { const checkedEntry1 = document.querySelectorAll('[name="entry1"]:checked'); result = []; checkedEntry1.forEach(input => result.push(input.value)); document.querySelector('#show-value').value = result.join(', '); } //load window.addEventListener('load', setup);

 <input id="value1" name="entry1" type="checkbox" value="3 maanden"><label for="value1">Value 1</label> <input id="value2" name="entry1" type="checkbox" value="6 maanden"><label for="value2">Value 2</label> <input id="value3" name="entry1" type="checkbox" value="Uitgeschreven"><label for="value3">Value 3</label> <input id="show-value" type="hidden">