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!
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!
Share Improve this question asked Jul 3, 2017 at 19:27 Sockness_RogersSockness_Rogers 1,6833 gold badges13 silver badges23 bronze badges 3-
What's the relationship between the elements w/ class
.MEDICATION
and the checkbox? On the first line of your function, try logging the value of that selection to see if it includes the elements you expect it to. – anbnyc Commented Jul 3, 2017 at 19:35 - Hey @anbnyc thanks for the reply! I can see the class added to the right element in the console so I know it targets the right selection but it wont remove the class! – Sockness_Rogers Commented Jul 3, 2017 at 19:42
-
Can't think of what else might be the problem. If you can provide a reproducible example (like a JSFiddle) might be able to tell more. This probably isn't related, but you may want triple equals (
cbMed === true
) to check after theelse if
. – anbnyc Commented Jul 3, 2017 at 20:09
1 Answer
Reset to default 13You 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