Filter visual based on checkbox state in d3

I'm creating a d3 visualization which just draws circles on a rectangular background. I need to filter the circles based on the color of the circles(each checkbox title caters to a particular color). This is what I have tried so far -

HTML

  <div id="checkers">

  <label class="checkbox-inline"><input type="checkbox" class="filter"  id="afr" >Africa</label>
  <label class="checkbox-inline"><input type="checkbox" class="filter"  id="aus" >Australia</label>
  <label class="checkbox-inline"><input type="checkbox" class="filter"  id="asi" >Asia</label>
  <label class="checkbox-inline"><input type="checkbox" class="filter"  id="ant">Antarctica</label>
  </div>

Javascript

for(var line=0;line<60;line=line+14) {
for(var i=2;i<312;i=i+12) {
var Pcircles = svgContainer.append("circle")
                          .attr("cx",30+i)
                          .attr("cy",30+line)
                          .attr("r",5.5)
                          .attr("fill","#FC4C02")
                          .style("opacity", 1);


d3.select("#afr").on("change",function(){
  opacity = this.checked ? 1 : 0;
  svgContainer.selectAll(".Pcircles").style("opacity", opacity);

});

} }

When I uncheck a checkbox, all circles in the rows with that particular color need to get opacity zero. Currently, the opacity style does not change despite the state of the checkbox. Is there something that I am missing/ doing wrong here? Any help is highly appreciated.

Thanks !