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

If check box is selected add style

本文关键字：添加 样式 复选框 如果      更新时间：2023-09-26

如果选中复选框，我将尝试添加填充颜色，然后在取消选中复选框时删除颜色。需要能够同时选中多个复选框。

到目前为止，我只能在路径->样式中添加颜色，但当复选框未选中时无法删除它。

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

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

添加到@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>

当复选框未选中时，您的代码现在的样子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");
        }
    });
});
相关文章：