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

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>