通过选中复选框更改颜色 [英] Change color by checking checkbox
本文介绍了通过选中复选框更改颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有2个元素和8个颜色。所有我需要的是改变颜色的每个元素，当我点击复选框。当我们检查另一个框的元素，首先检查必须取消选中。
请css如果可能
这里是全部代码： http://codepen.io / gazdovsky / pen / FfGKH
html的一部分
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;
}`
推荐答案
是使用jQuery：
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
您在使用复选框时，最好使用单选按钮 （如David Thomas所说）。
You are using checkboxes while in your case it's better to use radio buttons (as David Thomas said).
要区分时钟颜色无线电组和箭头颜色无线电组，你必须为每个组使用一个name属性以及一个CSS类。所以html看起来像这样：
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>
接下来，在SVG中，您必须为路径使用ID：
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>
这篇关于通过选中复选框更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
