확인란을 선택하여 색상 변경

Question

각 요소에는 2 개의 요소와 8 개의 색상이 있습니다. 내가 필요한 것은 체크 박스를 클릭 할 때 각 요소의 색상을 변경하는 것입니다. 그리고 요소의 다른 상자를 검사 할 때 첫 번째 검사는 선택하지 않아야합니다. 는 CSS하십시오이 가능 여기에 전체 코드입니다 :

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

먼저 HTML의 http://codepen.io/gazdovsky/pen/FfGKH 부분은, 가장 좋은 방법은 사용하는 jQuery를한다 : 귀하의 경우가있는 동안 당신은 체크 박스를 사용하는

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

더 나은 사용 라디오 버튼 (데이비드 토마스가 말한대로).

시계 색상 라디오 그룹과 화살표 색상 라디오 그룹을 구별하려면 CSS 클래스와 함께 각 그룹에 name 속성을 사용해야합니다. 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> 

다음, 당신은 당신의 경로에 대한 ID를 사용할 필요가 귀하의 SVG에 :

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

:

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

마지막으로,이 스크립트는 트릭을 할해야