I'm trying to add a fill color if check box is checked and then remove color when the box is unchecked. Need to be able to check multiple check boxes at once.

So far I'm only able to add the color in path-> style, but not able to remove it when box is unchecked.

so far this is what i have:

```
<form id="mapform" action="">
    <input type="checkbox" name="color" value="blue"> blue<br>
    <input type="checkbox" name="color" value="green"> green<br>
    <input type="checkbox" name="color" value="yellow" > yellow<br>
    <input type="checkbox" name="color" value="red" > red<br>
</form> 

<a class="color" xlink:href="#"> 
   <path color="blue" style="enable-background:accumulate;color:#000000;" d="m1847.9,1886.3,24.914-1.9938,2.9897,46.856-25.911,0-8.969-28.912z" fill-rule="nonzero" stroke-dashoffset="0"/>
</a>

<a class="color" xlink:href="#"> 
   <path color="green" style="enable-background:accumulate;color:#000000;" d="m1847.9,1886.3,24.914-1.9938,2.9897,46.856-25.911,0-8.969-28.912z" fill-rule="nonzero" stroke-dashoffset="0"/>
</a>

<a class="color" xlink:href="#"> 
   <path color="yellow" style="enable-background:accumulate;color:#000000;" d="m1847.9,1886.3,24.914-1.9938,2.9897,46.856-25.911,0-8.969-28.912z" fill-rule="nonzero" stroke-dashoffset="0"/>
</a>

<a class="color" xlink:href="#"> 
   <path color="red" style="enable-background:accumulate;color:#000000;" d="m1847.9,1886.3,24.914-1.9938,2.9897,46.856-25.911,0-8.969-28.912z" fill-rule="nonzero" stroke-dashoffset="0"/>
</a>

```

JS

```
$(document).ready(function(){
    $("#mapform input").change(function(){   

        var checkedColor = $("#mapform input:checked").val();   
        $("path[color*="+ checkedColor +"]").css("fill","#008fff");
        $("path[color!="+checkedColor+"]").css("fill","#595a5c"); 
    });

});

```