Задача: реализовать автоматическое заполнение чек-бокса при клике на картинку с подсвечивание, так же и обратно, при отметке чек-бокса подсвечивать выбранную картинку. Код я написал, но уверен что это можно сделать короче. Подскажите как?
Код прилагается ниже:
var coupons = $(".field-name-field-coupon-image img");
var checkbox = $("#edit-submitted-offers-choose-your-offer input");
$(checkbox).change(function () {
if ($(checkbox[0]).attr("checked")) {
$(coupons[0]).addClass("coupons-border-selected");
} else {
$(coupons[0]).removeClass("coupons-border-selected");
}
if ($(checkbox[1]).attr("checked")) {
$(coupons[1]).addClass("coupons-border-selected");
} else {
$(coupons[1]).removeClass("coupons-border-selected");
}
if ($(checkbox[2]).attr("checked")) {
$(coupons[2]).addClass("coupons-border-selected");
} else {
$(coupons[2]).removeClass("coupons-border-selected");
}
});
$(coupons[0]).click(function () {
if ($(checkbox[0]).attr("checked")) {
$(checkbox[0]).removeProp("checked");
$(coupons[0]).removeClass("coupons-border-selected");
} else {
$(checkbox[0]).prop("checked", true);
$(coupons[0]).addClass("coupons-border-selected");
}
});
$(coupons[1]).click(function () {
if ($(checkbox[1]).attr("checked")) {
$(checkbox[1]).removeProp("checked");
$(coupons[1]).removeClass("coupons-border-selected");
} else {
$(checkbox[1]).prop("checked", true);
$(coupons[1]).addClass("coupons-border-selected");
}
});
$(coupons[2]).click(function () {
if ($(checkbox[2]).attr("checked")) {
$(checkbox[2]).removeProp("checked");
$(coupons[2]).removeClass("coupons-border-selected");
} else {
$(checkbox[2]).prop("checked", true);
$(coupons[2]).addClass("coupons-border-selected");
}
});