css - 通过选中复选框更改颜色

Question

我有 2 个元素和 8 种颜色。我需要做的就是在单击复选框时更改每个元素的颜色。当我们检查元素的另一个框时，必须取消选中第一个检查。如果可能请使用 CSS这是完整的代码:http://codepen.io/gazdovsky/pen/FfGKH部分html

    `
<div class="demo2">
    <div class="tag">Clocks color</div>
    <input type="checkbox" id="checkbox-1" class="regular-checkbox big-checkbox color1" /><label for="checkbox-1" style="
        background-color: #eeeeee;" ></label>
    <input type="checkbox" id="checkbox-2" class="regular-checkbox big-checkbox 2color" /><label for="checkbox-2" style="
        background-color: #4b69af;"></label>  
    <input type="checkbox" id="checkbox-3" class="regular-checkbox big-checkbox 3color" /><label for="checkbox-3" style="
        background-color: #403486;"></label>
    <input type="checkbox" id="checkbox-4" class="regular-checkbox big-checkbox 4color" /><label for="checkbox-4" style="
        background-color: #3ea03b;"></label>
    <input type="checkbox" id="checkbox-5" class="regular-checkbox big-checkbox 5color" /><label for="checkbox-5" style="
        background-color: #f0df0d;"></label>
    <input type="checkbox" id="checkbox-6" class="regular-checkbox big-checkbox 6color" /><label for="checkbox-6" style="
        background-color: #f5a02c;"></label>
    <input type="checkbox" id="checkbox-7" class="regular-checkbox big-checkbox 7color" /><label for="checkbox-7" style="
        background-color: #d23f2d;"></label>
    <input type="checkbox" id="checkbox-8" class="regular-checkbox big-checkbox 8color" /><label for="checkbox-8" style="
        background-color: #201b21;"></label>
    <div>Arrows color</div>
    <input type="checkbox" id="checkbox-1-2" class="regular-checkbox big-checkbox 1color" /><label for="checkbox-1-2" style="
        background-color: #eeeeee;"></label>
</div>
<div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="800px" height="800px"  viewBox="100 100 1000 1000" enable-background="new 0 0 0 0" class="hand" >
    <g transform="translate(280,150) rotate(0) scale (0.2)"  funciri="none">
    <path fill-rule="evenodd" class="hand" fill="#0D0D0D" d="M480.366,674.977c-1.345-36.176,16.102-91.082,42.928-100.447"/>
    <g transform="translate(70,-50)">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#30AF4A" class="arrow" d="M315.277,518.127h-33.089h-22.022
        c-3.031,0-5.949,1.199-8.093,3.369c-2.145,2.143-3.346,5.055-3.346,8.08v1.855c0,3.027,1.201,5.939,3.346,8.0827z"/>
    <filter id="pictureFilter" >
        <feGaussianBlur stdDeviation="15" />
    </filter>
</svg>
    `
here is CSS:


 `.demo2 label {
    display: inline-block;
    }
    .demo2 .regular-checkbox {
    display: none;
    }
    .demo2 .regular-checkbox + label {
    background-color: #cc6e5d;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    }
    .demo2 .regular-checkbox + label:active, .regular-checkbox:checked + label:active{
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
    }
    .demo2 .regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 10px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #fff;
    }
    .demo2 .big-checkbox + label {
    padding: 18px;
    }
    .demo2 .big-checkbox:checked + label:after {
    font-size: 28px;
    left: 6px;
    }
    .logo {
    width: 300px;
    height: 300px;
    }
    .ground .checkbox-1:checked + label:after {
    fill: #d23f2d;
    }
    .ground{
    fill: #d23f2d;
    }
    .arrow,
    .hand{
    -webkit-transition:all 0.8s ease;
    } 
    .arrow:hover,
    .hand:hover {
    fill: #ace63c; 
    }`

Answer 1

首先，最好的方法是使用 jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

您正在使用复选框，而在您的情况下最好使用单选按钮(正如 David Thomas 所说)。

要区分时钟颜色单选组和箭头颜色单选组，您必须为每个组使用名称属性以及 CSS 类。所以 html 看起来像这样:

<div class="demo2">
    <div class="tag">Clocks color</div>
    <input type="radio" id="checkbox-1" name="clock-color" class="regular-checkbox big-checkbox color1 clock-color" /><label for="checkbox-1" style="
    background-color: #eeeeee;" ></label>
    <input type="radio" id="checkbox-2" name="clock-color" class="regular-checkbox big-checkbox 2color clock-color" /><label for="checkbox-2" style="
    background-color: #4b69af;"></label>  
    <input type="radio" id="checkbox-3" name="clock-color" class="regular-checkbox big-checkbox 3color clock-color" /><label for="checkbox-3" style="
    background-color: #403486;"></label>
    <input type="radio" id="checkbox-4" name="clock-color" class="regular-checkbox big-checkbox 4color clock-color" /><label for="checkbox-4" style="
    background-color: #3ea03b;"></label>
  <input type="radio" id="checkbox-5" name="clock-color" class="regular-checkbox big-checkbox 5color clock-color" /><label for="checkbox-5" style="
    background-color: #f0df0d;"></label>
    <input type="radio" id="checkbox-6" name="clock-color" class="regular-checkbox big-checkbox 6color clock-color" /><label for="checkbox-6" style="
    background-color: #f5a02c;"></label>
    <input type="radio" id="checkbox-7" name="clock-color" class="regular-checkbox big-checkbox 7color clock-color" /><label for="checkbox-7" style="
    background-color: #d23f2d;"></label>
    <input type="radio" id="checkbox-8" name="clock-color" class="regular-checkbox big-checkbox 8color clock-color" /><label for="checkbox-8" style="
    background-color: #201b21;"></label>
  <div>Arrows color</div>
  <input type="radio" id="checkbox-1-2" name="arrows-color" class="regular-checkbox big-checkbox 1color arrows-color" /><label for="checkbox-1-2" style="
    background-color: #eeeeee;"></label>
    <input type="radio" id="checkbox-2-2" name="arrows-color" class="regular-checkbox big-checkbox 2color arrows-color" /><label for="checkbox-2-2" style="
    background-color: #4b69af;"></label>
    <input type="radio" id="checkbox-3-2" name="arrows-color" class="regular-checkbox big-checkbox 3color arrows-color" /><label for="checkbox-3-2" style="
    background-color: #403486;"></label>
    <input type="radio" id="checkbox-4-2" name="arrows-color" class="regular-checkbox big-checkbox 4color arrows-color" /><label for="checkbox-4-2" style="
    background-color: #3ea03b;"></label>
  <input type="radio" id="checkbox-5-2" name="arrows-color" class="regular-checkbox big-checkbox 5color arrows-color" /><label for="checkbox-5-2" style="
    background-color: #f0df0d;"></label>
    <input type="radio" id="checkbox-6-2" name="arrows-color" class="regular-checkbox big-checkbox 6color arrows-color" /><label for="checkbox-6-2" style="
    background-color: #f5a02c;"></label>
    <input type="radio" id="checkbox-7-2" name="arrows-color" class="regular-checkbox big-checkbox 7color arrows-color" /><label for="checkbox-7-2" style="
    background-color: #d23f2d;"></label>
    <input type="radio" id="checkbox-8-2" name="arrows-color" class="regular-checkbox big-checkbox 8color arrows-color" /><label for="checkbox-8-2" style="
    background-color: #201b21;"></label>
  </div>

接下来，在您的 SVG 中，您必须为路径使用 ID:

<path id="clock" .../>
<path id="arrows" .../>

最后，这个脚本应该可以解决问题:

<script type="text/javascript">
function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    var color = '#';
    for (var i = 1; i <= 3; i++) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
        color += parts[i];
    }
    return color;
}
$(document).ready(function () {
    $(".clock-color").click(function(){
        chkID = $(this).attr('id');
        color = $('#'+chkID).next('label').css('backgroundColor');
        color = hexc(color);
        $("#clock").attr('fill',color);
    });
    $(".arrows-color").click(function(){
        chkID = $(this).attr('id');
        color = $('#'+chkID).next('label').css('backgroundColor');
        color = hexc(color);
        $("#arrows").attr('fill',color);
    });     
});
</script>