通過選中複選框更改顏色

Question

我有2個元素和8種顏色。所有我需要的是當我點擊複選框時改變每個元素的顏色。當我們檢查另一個元素的框時，首先檢查必須未選中。 請CSS如果可能 下面是完整的代碼：HTML的http://codepen.io/gazdovsky/pen/FfGKH 部分

` 
<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>