web-dev-qa-db-fra.com

case à cocher cocher/décocher à l'aide de d3

J'ai de la difficulté à cocher et à décocher les cases à l'aide de la sélection d3. Le code suivant ne semble pas fonctionner. Je souhaite que toutes les cases à cocher soient cochées lorsque vous cliquez sur «cocher» et que toutes les cases à cocher soient désélectionnées lorsque vous désélectionnez cette case.

<!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>
javascriptcheckboxd3.js
15
user2967165

Utilisez property() au lieu de attr():

function checkAll() {
    d3.selectAll('input').property('checked', true);
}
function uncheckAll() {
    d3.selectAll('input').property('checked', false);
}

De https://github.com/mbostock/d3/wiki/Selections#wiki-property :

Certains éléments HTML ont des propriétés spéciales qui ne sont pas adressables à l'aide d'attributs ou de styles standard. Par exemple, les champs de texte de formulaire ont une propriété value string et les cases à cocher ont une propriété checked boolean . Vous pouvez utiliser l'opérateur property pour obtenir ou définir ces propriétés.

31
Mark Rajcok

Modifiez votre fonction uncheckAll pour définir les attributs checked à null au lieu de false:

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

L'attribut vérifié est soit présent, éventuellement défini sur checked="checked", soit absent (aucun attribut vérifié). La définition de null supprimera l'attribut, dans ce cas.

2
Jeff Sisson

Ce que vous devez faire, c'est mettre à jour la valeur vérifiée de l'élément comme suit:

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

Cela garantira que seuls tous les états de case à cocher sont modifiés

2
Vikram Deshmukh

Vous pouvez limiter votre sélection aux cases à cocher en filtrant la sélection sur l'attribut type.

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

Cela évite de définir l'attribut vérifié sur les entrées non cochées qui sont présentes.

1
James Elderfield