Davagaz
Reputation: 884
Change color by checking checkbox
I have 2 element and 8 colors for each. All what I need is change color of each element when I clicked on checkbox. And when we check another box for element, first check must be unchecked. Please css if it possible Here is full code: http://codepen.io/gazdovsky/pen/FfGKH part of 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;
}`
Upvotes: 0
Views: 5407
Answers (1)
LRA
Reputation: 1077
First, the best way is to use jQuery:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
You are using checkboxes while in your case it's better to use radio buttons (as David Thomas said).
To distinguish between clock color radio group and arrows color radio group, you have to use a name attribute for each group along with a CSS class. So the html would look something like this:
<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>
Next, in your SVG you have to use IDs for your paths:
<path id="clock" .../>
<path id="arrows" .../>
Finally, this script should do the trick:
<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>
Upvotes: 2
Related Questions
- Change Checkbox background color when checked
- Changing color of the checkbox
- trying to get checkboxes to change color when checked
- Change Div Color When Clicking Checkbox
- how to do colored checkbox in javascript
- Javascript change of color with checkbox
- Change Color of Checkbox List Item onChange
- Html CheckBox : Change Color
- Change Checkbox Color in Javascript
- change check box and tick color once selected