Question

我一直在尝试创建复选框并显示其值。当您尝试仅选择其中一个时，它可以工作。当您尝试选择多个时，它仅显示所选的最高值。我想只用javascript，没有jquery这样做。如何显示所有选中复选框的所有值？

以下是目前的代码：

HTML：

<!doctype html>
<html>
    <head>
        <title>Javascript checkboxes in real time</title>
        <link rel = "stylesheet" href = "css/default.css">
    </head>
    <body>
        <form action = "" method = "post">
            <input type="checkbox" id = "1" value = "1">1<br>
            <input type="checkbox" id = "2" value = "2">2<br>
            <input type="checkbox" id = "3" value = "3">3<br>
            <input type="checkbox" id = "4" value = "4">4<br>
            <input type="checkbox" id = "5" value = "5">5<br>
        </form>
        <section></section>
        <script src = "js/default.js"></script>
    </body>
</html>

使用Javascript：

var checkbox = document.getElementsByTagName('input');
var section = document.getElementsByTagName('section');

setInterval(function(){
    for(var i = 0; i <= checkbox.length - 1; i++){
        if(checkbox[i].checked){
            section[0].innerHTML = checkbox[i].value;
            break;
        }
        else{
            section[0].innerHTML = null;
        }
    }
}, 10);

Answer 1

你的代码有几个问题，你无缘无故地每隔10ms查询一次DOM。当元素发生时，DOM元素会触发事件。

var section = document.getElementsByTagName('section')[0];
var inputs = document.getElementsByTagName('input');

// Document was changed!
document.addEventListener('change', function(event) {
  // Specifically, an input was changed in the document!
  if (event.target.tagName === 'INPUT') {
    // Update the section
    updateCheckboxStatus(section);
  }
});

// This function updates an element with the input status
function updateCheckboxStatus(element) {
  // Clear the element first
  element.textContent = '';
  // Loop through each of the inputs
  [].forEach.call(inputs, function(input) {
    // If checked, add to the element
    if (input.checked) { element.textContent += input.value + " "; }
  });
}

<form action="" method="post">
  <input type="checkbox" id="1" value="1">1
  <br>
  <input type="checkbox" id="2" value="2">2
  <br>
  <input type="checkbox" id="3" value="3">3
  <br>
  <input type="checkbox" id="4" value="4">4
  <br>
  <input type="checkbox" id="5" value="5">5
  <br>
</form>
<section></section>

Answer 2

编辑：我发布了我发现的最小修改，以解决您的问题。对于手头的任务来说，这绝不是正确的方法 - 正如（现在）接受的答案所完美解释的那样。这段代码应该只是为了让您看到代码中的差异。

另外 - 请不要使用setInterval（改为使用setTimeout并每次从回调内部更新）：

var checkbox = document.getElementsByTagName('input');
var section = document.getElementsByTagName('section');

setInterval(function(){
   section[0].innerHTML = '';
   for(var i = 0; i < checkbox.length; i++){
     if(checkbox[i].checked){
       section[0].innerHTML += checkbox[i].value;        
     }
   }
 }, 10);

使用javascript显示所选的复选框值

2 个答案: