我有四个选项，即身体，袖子，衣领和袖口，每个选项都有多种颜色。我为所有复选框都有一个名为“自定义颜色”的类。当我点击正文类型的复选框时，我想获取正文类型的数据图像属性，并且检查哪个正在为该复选框添加类“被检查”，并且我希望使用已检查的类将此值存储在localstorage中，并将其存储在其他选项中。例如，我想要如下数据， { '体象'： '1.png'， '袖子图像'： '1.png'， '领图像'： '1.png'， '袖口图像'：1.png ''}。但我想分别存放同一类的身体，袖子，衣领和袖口，即通用明智。如何实现这一点，请有人帮助我。
下面是Html，
<label class="control-label">Body</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-762" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/White-50x50.png" class="custom-colors" name="option[152]" value="762" id="option-value-762" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-755" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/1935U-50x50.png" class="custom-colors" name="option[152]" value="755" id="option-value-755" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-764" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/354U-50x50.png" class="custom-colors" name="option[152]" value="764" id="option-value-764" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-754" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/286U-50x50.png" class="custom-colors" name="option[152]" value="754" id="option-value-754" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-765" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/BlackU-50x50.png" class="custom-colors" name="option[152]" value="765" id="option-value-765" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-761" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/421U-50x50.png" class="custom-colors" name="option[152]" value="761" id="option-value-761" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/421U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-763" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/128U-50x50.png" class="custom-colors" name="option[152]" value="763" id="option-value-763" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
<label class="control-label">Sleeves</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-771" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/White-50x50.png" class="custom-colors" name="option[154]" value="771" id="option-value-771" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-770" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/1935U-50x50.png" class="custom-colors" name="option[154]" value="770" id="option-value-770" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-768" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/354U-50x50.png" class="custom-colors" name="option[154]" value="768" id="option-value-768" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-767" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/286U-50x50.png" class="custom-colors" name="option[154]" value="767" id="option-value-767" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-766" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/BlackU-50x50.png" class="custom-colors" name="option[154]" value="766" id="option-value-766" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-769" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/Black0961-U-50x50.png" class="custom-colors" name="option[154]" value="769" id="option-value-769" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/Black0961-U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-772" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/128U-50x50.png" class="custom-colors" name="option[154]" value="772" id="option-value-772" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
<label class="control-label">Collar</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-803" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/White-50x50.png" class="custom-colors" name="option[167]" value="803" id="option-value-803" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-804" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/1935U-50x50.png" class="custom-colors" name="option[167]" value="804" id="option-value-804" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-805" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/354U-50x50.png" class="custom-colors" name="option[167]" value="805" id="option-value-805" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-806" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/286U-50x50.png" class="custom-colors" name="option[167]" value="806" id="option-value-806" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-807" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/BlackU-50x50.png" class="custom-colors" name="option[167]" value="807" id="option-value-807" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-808" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/421U-50x50.png" class="custom-colors" name="option[167]" value="808" id="option-value-808" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/421U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-809" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/128U-50x50.png" class="custom-colors" name="option[167]" value="809" id="option-value-809" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
<label class="control-label">Cuffs</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-778" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/White-50x50.png" class="custom-colors" name="option[155]" value="778" id="option-value-778" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-777" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/1935U-50x50.png" class="custom-colors" name="option[155]" value="777" id="option-value-777" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-775" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/354U-50x50.png" class="custom-colors" name="option[155]" value="775" id="option-value-775" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-774" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/286U-50x50.png" class="custom-colors" name="option[155]" value="774" id="option-value-774" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-773" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/BlackU-50x50.png" class="custom-colors" name="option[155]" value="773" Yellow </div>
</label>
</span>
</div>id="option-value-773" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-776" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/7757U-50x50.png" class="custom-colors" name="option[155]" value="776" id="option-value-776" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/7757U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-779" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/128U-50x50.png" class="custom-colors" name="option[155]" value="779" id="option-value-779" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
以下是我的jquery，
$('.custom-colors').change(function() {
var image_index = $(this).data("index");
alert(image_index);
if(image_index)
{
$(this).addClass("checked");
}
$(this).each(function(){
var class_active = $(this).hasClass('checked');
if(class_active == true){
var image_src = $(this).data("image");
localStorage.setItem('body-image',image_src);
}
else
{
localStorage.removeItem('body-image');
}
});
});
答案 0 :(得分：0)
你有点不清楚你想要复选框中的多个值，或者每个＆＃34;类别＆＃34;只需要一个值。但这是我做的一个例子，它可以指导你朝着正确的方向发展。
$('.custom-colors').change(function() {
var image_index = $(this).data("index");
//alert(image_index);
if (image_index) {
$(this).addClass("checked");
}
r()
});
var data = {};
function r() {
$(".control-label").each(function() {
var n = $(this).text();
if ($(this).next().find(".checked").length > 0) {
data[n] = {}
var t = $.map($(this).next().find(".checked"), function(i, x) {
return $(i).data("image")
})
data[n].data = t
//localStorage.setItem(n, t) cant set here because of sandboxed.
}
});
console.clear()
console.log(data)
}
$('.custom-colors').change(function() {
var image_index = $(this).data("index");
//alert(image_index);
if (image_index) {
$(this).addClass("checked");
}
r()
});
var data = {};
function r() {
$(".control-label").each(function() {
var n = $(this).text();
if ($(this).next().find(".checked").length > 0) {
data[n] = {}
var t = $.map($(this).next().find(".checked"), function(i, x) {
return $(i).data("image")
})
data[n].data = t
//localStorage.setItem(n, t) cant set here because of sandboxed.
}
});
console.clear()
console.log(data)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="control-label">Body</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-762" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/White-50x50.png" class="custom-colors" name="option[152]" value="762" id="option-value-762" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-755" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/1935U-50x50.png" class="custom-colors" name="option[152]" value="755" id="option-value-755" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-764" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/354U-50x50.png" class="custom-colors" name="option[152]" value="764" id="option-value-764" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-754" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/286U-50x50.png" class="custom-colors" name="option[152]" value="754" id="option-value-754" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-765" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/BlackU-50x50.png" class="custom-colors" name="option[152]" value="765" id="option-value-765" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-761" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/421U-50x50.png" class="custom-colors" name="option[152]" value="761" id="option-value-761" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/421U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-763" style="color:transparent;">
<div id="input-option152">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/128U-50x50.png" class="custom-colors" name="option[152]" value="763" id="option-value-763" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/body/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
<label class="control-label">Sleeves</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-771" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/White-50x50.png" class="custom-colors" name="option[154]" value="771" id="option-value-771" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-770" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/1935U-50x50.png" class="custom-colors" name="option[154]" value="770" id="option-value-770" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-768" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/354U-50x50.png" class="custom-colors" name="option[154]" value="768" id="option-value-768" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-767" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/286U-50x50.png" class="custom-colors" name="option[154]" value="767" id="option-value-767" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-766" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/BlackU-50x50.png" class="custom-colors" name="option[154]" value="766" id="option-value-766" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-769" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/Black0961-U-50x50.png" class="custom-colors" name="option[154]" value="769" id="option-value-769" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/Black0961-U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-772" style="color:transparent;">
<div id="input-option154">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/128U-50x50.png" class="custom-colors" name="option[154]" value="772" id="option-value-772" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/sleeves/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
<label class="control-label">Collar</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-803" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/White-50x50.png" class="custom-colors" name="option[167]" value="803" id="option-value-803" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-804" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/1935U-50x50.png" class="custom-colors" name="option[167]" value="804" id="option-value-804" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-805" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/354U-50x50.png" class="custom-colors" name="option[167]" value="805" id="option-value-805" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-806" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/286U-50x50.png" class="custom-colors" name="option[167]" value="806" id="option-value-806" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-807" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/BlackU-50x50.png" class="custom-colors" name="option[167]" value="807" id="option-value-807" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-808" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/421U-50x50.png" class="custom-colors" name="option[167]" value="808" id="option-value-808" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/421U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-809" style="color:transparent;">
<div id="input-option167">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/128U-50x50.png" class="custom-colors" name="option[167]" value="809" id="option-value-809" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/collar/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>
<label class="control-label">Cuffs</label>
<div class="radio">
<span class="set-color" data-color="white">
<label for="option-value-778" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="1" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/White-50x50.png" class="custom-colors" name="option[155]" value="778" id="option-value-778" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/White-50x50.png" alt="White" /> -->
White </div>
</label>
</span>
<span class="set-color" data-color="red">
<label for="option-value-777" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="2" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/1935U-50x50.png" class="custom-colors" name="option[155]" value="777" id="option-value-777" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/1935U-50x50.png" alt="Red" /> -->
Red </div>
</label>
</span>
<span class="set-color" data-color="green">
<label for="option-value-775" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="3" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/354U-50x50.png" class="custom-colors" name="option[155]" value="775" id="option-value-775" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/354U-50x50.png" alt="Green" /> -->
Green </div>
</label>
</span>
<span class="set-color" data-color="blue">
<label for="option-value-774" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="4" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/286U-50x50.png" class="custom-colors" name="option[155]" value="774" id="option-value-774" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/286U-50x50.png" alt="Blue" /> -->
Blue </div>
</label>
</span>
<span class="set-color" data-color="black">
<label for="option-value-773" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="5" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/BlackU-50x50.png" class="custom-colors" name="option[155]" value="773" Yellow </div>
</label>
</span>
</div>id="option-value-773" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/BlackU-50x50.png" alt="Black" /> -->
Black </div>
</label>
</span>
<span class="set-color" data-color="grey">
<label for="option-value-776" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="6" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/7757U-50x50.png" class="custom-colors" name="option[155]" value="776" id="option-value-776" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/7757U-50x50.png" alt="Grey" /> -->
Grey </div>
</label>
</span>
<span class="set-color" data-color="yellow">
<label for="option-value-779" style="color:transparent;">
<div id="input-option155">
<input type="checkbox" data-index="7" data-image="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/128U-50x50.png" class="custom-colors" name="option[155]" value="779" id="option-value-779" />
<!-- <img src="http://192.168.1.156/dutees/image/cache/catalog/pngs/cuffs/128U-50x50.png" alt="Yellow" /> -->
Yellow </div>
</label>
</span>
</div>