Question

有人可以为我提供一个JSFiddle演示实现吗？我在下面有以下HTML代码。我想在javascript中记录我点击的单选按钮。假如我选择第一个单选按钮id="white1"，则数组应存储整数＆＃39; 1＆＃39;。我是javascript的初学者，所以任何帮助将不胜感激！

<body>
    <div id="container">
      <div id="overlay">
        <form action="">
          <input type="radio" name="white" value="1" id="radio1"/>
          <input type="radio" name="white" value="2" id="radio2"/>
          <input type="radio" name="white" value="3" id="radio3"/>
          <input type="radio" name="white" value="4" id="radio4"/>
          <input type="button" id="continue" value="Continue"/>
        </form>
      </div>
      <div id="base">
        <video controls>
          <source src="videos/event_0_Junli_Standing_20150322_181647_00_0.6.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
    <script>
      var arr = []
      document.getElementById("continue").addEventListener("click", function() {
          var cbChecked = document.querySelectorAll('[name="white"]:checked')
          if (cbChecked != null) {
            arr.push(cbChecked.value)
          }
          console.log(arr)
      }) 
    </script>
  </body>

Answer 1

您可以使用document.querySelector()直接选择当前的任何单选按钮:checked：

var arr = []

document.getElementById("continue").addEventListener("click", function() {
  var cbChecked = document.querySelector('[name="white"]:checked')
  
  if (cbChecked != null) {
    arr.push(cbChecked.value)
  }

  console.log(arr)
})

<form action="">
  <input type="radio" name="white" value="1" />
  <input type="radio" name="white" value="2" />
  <input type="radio" name="white" value="3" />
  <input type="radio" name="white" value="4" />
  <input type="button" id="continue" value="Continue"/>
</form>

如果没有元素与提供的选择器匹配，则

.querySelector()返回null，否则返回匹配的第一个元素（在您的情况下只有一个）。请注意，根据MDN，the :checked selector在IE9之前的浏览器中不起作用，在这种情况下，您可能必须使用document.querySelectorAll('[name="white"]')或其他一些元素选择方法来获取所有无线电和然后循环遍历它们，直到找到被检查的那个。

另请注意，我已将您的HTML更改为单选按钮的更“正常”实现，即为它们提供所有相同的name属性，以便它们作为一个组工作，并为它们提供{ {1}}属性来区分它们。它们不需要value属性 - 至少不是这个。

将HTML单选按钮中的数据存储到Javascript数组

1 个答案: