Menu
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.
<!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>
476
Use property() instead of 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:
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.
148
Change your uncheckAll function to set the checked attributes to null instead of 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 null will remove the attribute, in this case.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
