javascript - 获取d3选择中每个元素的value属性

Question

我有很多用于以下表单的输入标签:

<input class="checkbox" type="checkbox" value="something_I_need_when_checked">

我需要所有复选框的值。当我调用console.log(d3.selectAll("input.checkbox:checked").property("value"))时我只看到第一个元素的值。 This帖子有一些关于如何更改这些值的线索(编辑:我不想更改任何内容；我只想要这些值)。我尝试使用 selection.each(function())有人提出了这个想法，但我没有得到任何结果。我怎样才能获得我选择的所有值。

我是n00b，请保持友善。谢谢~

Answer 1

selection.each 确实有效。但是，您必须在单击复选框后调用它。

在此演示中，将在您单击名为“检查”的按钮后创建选择。单击所需的框，然后单击按钮:

d3.select("button").on("click", function() {
  var boxes = d3.selectAll("input.checkbox:checked");
  boxes.each(function() {
    console.log(this.value)
  })
});

<script src="https://d3js.org/d3.v4.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>

编辑:将检查的值存储在数组中:

var checked = [];
d3.select("button").on("click", function() {
  var boxes = d3.selectAll("input.checkbox:checked");
  boxes.each(function() {
    checked.push(this.value)
  });
  console.log(checked)
});

<script src="https://d3js.org/d3.v4.js"></script>
<input class="checkbox" type="checkbox" value="foo">foo
<input class="checkbox" type="checkbox" value="bar">bar
<input class="checkbox" type="checkbox" value="baz">baz
<input class="checkbox" type="checkbox" value="foobar">foobar
<input class="checkbox" type="checkbox" value="foobaz">foobaz
<button>Check</button>