Checkbox check/uncheck using d3

У меня возникают трудности с проверкой и снятием флажков с помощью выбора 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>

Ответ 1

Используйте 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 boolean. Вы можете использовать оператор property для получения или установки этих свойств.

Ответ 2

Измените функцию uncheckAll, чтобы установить атрибуты checked в null вместо false:

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

Проверяемый атрибут присутствует либо необязательно, либо checked="checked", либо отсутствует (вообще не проверен атрибут). Установка этого параметра в null приведет к удалению атрибута в этом случае.

Ответ 3

Что вам нужно сделать, это обновить проверенное значение элемента следующим образом:

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

Это обеспечит изменение только всех состояний флажка.

Ответ 4

Вы можете ограничить свой выбор только флажками, отфильтровав выделение по атрибуту type,

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

Это позволяет избежать установки проверенного атрибута на входные флажки без флажка.