Question

如果选中复选框，则尝试添加填充色，然后在取消选中该框时删除颜色。需要能够一次检查多个复选框。

到目前为止，我只能在路径中添加颜色＆gt;样式，但在取消选中框时无法将其删除。

到目前为止，这就是我所拥有的：

<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"); 
    });

});

Answer 1

添加@ amura.cxgs答案并回答您的跟进问题

是的，可能会出现“反向”行为您需要连接锚点的click事件。

$('#mapform input').change(function() {
  var checkedColor = $(this).val();
  var checked = $(this).prop('checked');
  $('path[color*=' + checkedColor + ']').css('fill', checked ? checkedColor : '#595a5c');
});

$('a.color').on('click', function() {
  var checkedColor = $('path', this).attr('color');
  var checked = $('#mapform input[value*="' + checkedColor + '"]').prop('checked');
  $('#mapform input[value*="' + checkedColor + '"]').prop('checked', !checked);
  $('path[color*=' + checkedColor + ']').css('fill', !checked ? checkedColor : '#595a5c');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mapform">
  <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 />
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a class="color" xlink:href="#">
    <path color="blue" d="M0 0 H 10 V 10 H -10 Z" />
  </a>
  <a class="color" xlink:href="#">
    <path color="green" d="M0 30 H 10 V 20 H -20 Z" />
  </a>
  <a class="color" xlink:href="#">
    <path color="yellow" d="M0 50 H 10 V 40 H -40 Z" />
  </a>
  <a class="color" xlink:href="#">
    <path color="red" d="M0 70 H 10 V 60 H -60 Z" />
  </a>
</svg>

Answer 2

当取消选中复选框时，您的代码现在的方式checkedColor将没有任何值，选择器将无法与之匹配。试试这样的事情

$(document).ready(function(){
    $("#mapform input").change(function(){   
        var checkedColor = $(this).val();
        var checked = $(this).prop("checked");
        if(checked)
        {
            $("path[color="+ checkedColor +"]").css("fill","#008fff");
        }
        else
        {
            $("path[color="+checkedColor+"]").css("fill","#595a5c");
        }
    });
});

如果选中复选框，则添加样式

2 个答案: