D3 using classed() to add and remove class with checkbox

Question

I am having trouble removing a class that I have added using a checkbox. The checkbox is checked to begin with. When it is unchecked by the user it adds a "hideRect" class with classed('hideRect', true); this works great BUT when I check the box again the class doesn't go away.

Here is my code:

this.$node.append('input')
    .attr('type', 'checkbox')
    .attr('checked', true)
    .attr('value', 'med')
    .on('click', () => this.updateRectLine());
  }

private updateRectLine() {

  //var rect = this.$node.getElementsByClassName('.MEDICATION');
  var cbMed = this.$node.attr("checked");
  if (cbMed !== true){
      this.$node.selectAll(".MEDICATION").classed('hideRect', true);
  }

  else if (cbMed == true){
      this.$node.selectAll(".MEDICATION").classed('hideRect', false);
  }

}

thanks in advance!

Answer 1

You need to update the below function like this

private updateRectLine() { 
  var cbMed = this.$node.select("input[type='checkbox']").prop("checked");
  if (!cbMed)
    this.$node.selectAll(".MEDICATION").classed('hideRect', true);
  else
    this.$node.selectAll(".MEDICATION").classed('hideRect', false);
}

.attr() function only returns the value the checkbox was initialized to, to check for a checkbox's check state, you want to use property checked present on check box elements