Checkbox Check/uncheck Using D3

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,

Solution 1:

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 value string property, and checkboxes have a checked boolean property. You can use the property operator to get or set these properties.

Solution 2:

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.

Solution 3:

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

Solution 4:

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.