獲取每個元素的值屬性在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確實有效。但是，您必須在點擊複選框之後將其稱爲。

在此演示中，將在之後創建選擇，然後單擊名爲「Check」的按鈕。點擊你想要的箱子，之後，點擊按鈕：

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>