获取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确实有用。但是，您必须在>点击复选框后将其称为。

在此演示中，选择后点击名为＆＃34; Check＆＃34;的按钮。单击所需的框，然后单击按钮：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

编辑：将选中的值存储在数组中：

＆＃13;

＆＃13;

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)
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将字段放入数组的另一种方法是使用map函数。在下面的示例中，我以Gerardo Furtado的答案为基础。

d3.select("button").on("click", function() {
  var checkedBoxes = d3.selectAll("input.checkbox:checked").nodes().map(box => box.value);
  console.log(checkedBoxes)
});

<script src="https://d3js.org/d3.v5.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>