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 元素具有使用标准属性或样式无法寻址的特殊属性。例如，表单文本字段有一个value字符串属性，而复选框有一个checked布尔属性。您可以使用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 回答
3

更改您的uncheckAll函数以将checked属性设置为null而不是false：

function uncheckAll(){
    d3.selectAll('input').attr('checked',null);
}

选中的属性要么存在，可选设置为checked="checked"，要么不存在（根本没有选中的属性）。在这种情况下，将其设置为null将删除该属性。

于 2013-11-08T02:28:52.377 回答
2

您可以通过过滤 type 属性上的选择来将选择限制为仅复选框，

d3.selectAll("input[type=checkbox]").property("checked", true);

这避免了在存在的非复选框输入上设置选中的属性。

于 2017-12-28T11:55:22.020 回答