18

d3 選択を使用してチェックボックスをオンまたはオフにするのが困難です。次のコードは機能していないようです。「チェック」を押すとすべてのチェックボックスがオンになり、「チェックを外す」が押されるとすべてのチェックボックスがオフになります。

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button type='button' onclick='checkAll()'>Check</button>
<button type='button' onclick='uncheckAll()'>Uncheck</button>

<script src="http://d3js.org/d3.v2.min.js?2.10.0"></script>

<script>
function checkAll(){
    d3.selectAll('input').attr('checked','true');
}
function uncheckAll(){
    d3.selectAll('input').attr('checked','false');
}
</script>
</body>
4

4 に答える 4

40

property()の代わりに使用attr():

function checkAll() {
    d3.selectAll('input').property('checked', true);
}
function uncheckAll() {
    d3.selectAll('input').property('checked', false);
}

https://github.com/mbostock/d3/wiki/Selections#wiki-propertyから:

一部の HTML 要素には、標準の属性またはスタイルを使用してアドレス指定できない特別なプロパティがあります。たとえば、フォームのテキスト フィールドにはvaluestring プロパティがあり、チェックボックスにはcheckedboolean プロパティがあります。property演算子を使用して、これらのプロパティを取得または設定できます。

于 2013-11-25T21:54:51.270 に答える
3

あなたがする必要があるのは、要素のチェックされた値を次のように更新することです:

d3.selectAll("input").each(function(d){ 
  if(d3.select(this).attr("type") == "checkbox") 
    d3.select(this).node().checked = true;
});

これにより、すべてのチェックボックスの状態のみが変更されることが保証されます

于 2013-11-08T11:23:31.143 に答える