javascript 使用 d3 选中/取消选中复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19849738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
checkbox check/uncheck using d3
提问by user2967165
I am having difficulty checking and unchecking checkboxes using d3 selection. The following code doesn't seem to work. I want all check boxes to be checked when 'check' is pressed, and all checkboxes unchecked when 'uncheck' is pressed.
我无法使用 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>
回答by Mark Rajcok
Use property()instead of attr():
使用property()代替attr()：
function checkAll() {
d3.selectAll('input').property('checked', true);
}
function uncheckAll() {
d3.selectAll('input').property('checked', false);
}
From https://github.com/mbostock/d3/wiki/Selections#wiki-property:
从https://github.com/mbostock/d3/wiki/Selections#wiki-property：
Some HTML elements have special properties that are not addressable using standard attributes or styles. For example, form text fields have a
valuestring property, and checkboxes have acheckedboolean property. You can use thepropertyoperator to get or set these properties.
某些 HTML 元素具有使用标准属性或样式无法寻址的特殊属性。例如，表单文本字段有一个
value字符串属性，复选框有一个checked布尔属性。您可以使用property运算符来获取或设置这些属性。
回答by Jeff Sisson
Change your uncheckAllfunction to set the checkedattributes to nullinstead of false:
更改您的uncheckAll函数以将checked属性设置为null而不是false：
function uncheckAll(){
d3.selectAll('input').attr('checked',null);
}
The checked attribute is either present, optionally set to checked="checked", or absent (no checked attribute at all). Setting it to nullwill remove the attribute, in this case.
选中的属性要么存在，可选择设置为checked="checked"，要么不存在（根本没有选中的属性）。null在这种情况下，将其设置为将删除该属性。
回答by Vikram Deshmukh
What you need to do is update the checked value of the element as follows:
您需要做的是更新元素的选中值，如下所示：
d3.selectAll("input").each(function(d){
if(d3.select(this).attr("type") == "checkbox")
d3.select(this).node().checked = true;
});
This will ensure only all checkbox states are changed
这将确保仅更改所有复选框状态
回答by James Elderfield
You can limit your selection to only checkboxes by filtering the selection on the type attribute,
您可以通过过滤类型属性上的选择来将您的选择限制为仅复选框，
d3.selectAll("input[type=checkbox]").property("checked", true);
This avoids setting the checked attribute on non-checkbox inputs that are present.
这避免了在存在的非复选框输入上设置 checked 属性。
