1

Задача: реализовать автоматическое заполнение чек-бокса при клике на картинку с подсвечивание, так же и обратно, при отметке чек-бокса подсвечивать выбранную картинку. Код я написал, но уверен что это можно сделать короче. Подскажите как?

Код прилагается ниже:

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");
            }
        });

4 ответа 4

2

попрбуйте так

var coupons = $(".field-name-field-coupon-image img");
var checkbox = $("#edit-submitted-offers-choose-your-offer input");

$(checkbox).change(function () {
  checkboxChange(0);
  checkboxChange(1);
  checkboxChange(2);
});


$( coupons ).each(function(index) {
    $(this).on("click", function(){
        if ($(this).attr("checked")) {
            $(this).removeProp("checked");
            $(this).removeClass("coupons-border-selected");
        } else {
            $(this).prop("checked", true);
            $(this).addClass("coupons-border-selected");
        }
    });
});

function checkboxChange(chbId){
   if ($(checkbox[chbId]).attr("checked")) {
     $(coupons[chbId]).addClass("coupons-border-selected");
   } else {
     $(coupons[chbId]).removeClass("coupons-border-selected");
   }
}
1
  • 1
    Все почему-то решили повторить ошибку с .attr("checked"). Не знаю с чем это связано (то, что у автора так, - не в счет). Код по-прежнему можно ощутимо укоротить, можно исправить ошибку с .attr("checked"), можно отойти от негибкого и нелогичного (зачем проверять все checkbox при смене одного?) checkboxChange(0); checkboxChange(1); checkboxChange(2); в пользу проверки только текущего. Галочка в чекбоксе при клике на картинку в данном коде, кстати, не проставляется (даже при исправленном .attr("checked")). Код без исправления последней ошибки: fiddle.
    – Regent
    Commented 22 сент. 2015 в 17:35
1
$(checkbox).each(function(){
    $(this).on('change', function(){
        $(this).attr("checked") ? $(this).addClass("coupons-border-selected") : $(this).removeClass("coupons-border-selected");
    })
})
$(coupons).each(function(){
    $(this).on('click', function(){
        if ($(this).attr("checked")) {
            $(this).removeProp("checked");
            $(this).removeClass("coupons-border-selected");
        } else {
            $(this).prop("checked", true);
            $(this).addClass("coupons-border-selected");
        }
    })
})
6
  • 1
    тут кажется вместо coupons[0] будет this
    – Saidolim
    Commented 22 сент. 2015 в 14:57
  • Да, точно) Спасибо
    – Moonvvell
    Commented 22 сент. 2015 в 14:59
  • Спасибо, помогли нубу)
    – Baga
    Commented 22 сент. 2015 в 15:03
  • Спасибо, помогли нубу, только вот this не совсем то. Дело в том что картинки и чекбоксы это разные елементы, не связанные между собой.
    – Baga
    Commented 22 сент. 2015 в 15:10
  • 1
    This - уникальный идентификатор текущего элемента с которым идет взаимодействие. Для каждого элемента checkbox - this - это один чекбокс, для каждого элемента coupons - это одна из картинок.
    – Moonvvell
    Commented 22 сент. 2015 в 15:13
1

Идея состоит в том, чтобы по клику на checkbox добавлять/удалять класс у соответствующего (равного по индексу) <img> в зависимости от значения свойства checked, а по клику на <img> - менять значение свойства checked у соответствующего (равного по индексу) checkbox в зависимости от наличия класса.
Селекторы $coupons и $checkbox упрощены для примера.

JS:

$(document).ready(function() {
    var $coupons = $("img");
    var $checkbox = $("input");
    var className = "coupons-border-selected";

    $checkbox.on("change", function() {
        var index = $checkbox.index(this);
        $coupons.eq(index).toggleClass(className, this.checked);
    });

    $coupons.on("click", function() {
        var index = $coupons.index(this);
        $(this).toggleClass(className);
        $checkbox[index].checked = $(this).hasClass(className);
    });
});

Полный пример в fiddle.

1

Можно привязать клик на картинке к чекбоксу средствами HTML:

<input type="checkbox" id="chb1" />
<label for="chb1"><img src="http://example.com/s.png" /></label>

Ну и циклы.

for(var i=0; i<coupons.length; i++) {
    addHandler_Coupons(i)
}

function addHandler_Coupons(i) {
    $(coupons[i]).click(function () {
        if ($(checkbox[i]).attr("checked")) {
            $(checkbox[i]).removeProp("checked");
            $(coupons[i]).removeClass("coupons-border-selected");
        } else {
            $(checkbox[i]).prop("checked", true);
            $(coupons[i]).addClass("coupons-border-selected");
        }
    });
}

Ещё можно группировать элементы в логические блоки, и бегать по DOM относительно нужных элементов.

<div class="block">
    <input type="checkbox"> <img src="">
</div>
<div class="block">
    <input type="checkbox"> <img src="">
</div>

И поставить единый слушатель на событие click на все блоки.

$('.block img').click(function() {
   var input =  $(this).closest('.block').find('input');
   var checked = input.prop("checked");
   input.prop('checked', !checked);
});
3
  • 1
    По поводу финального варианта: 1. e.target можно заменить на this, а e убрать из аргументов функции. 2. .parent() - негибкое решение, стоит заменить на .closest('.block'). 3. .attr("checked") - это за гранью добра и зла (если, конечно, вы не используете жутко старую версию jQuery). Нужно заменить на .prop("checked") или input[0].checked. Аналогично в следующей строке: либо через .prop(), либо через input[0].checked. На данный момент код не рабочий (с jQuery 1.11.0 и 2.1.3) fiddle.
    – Regent
    Commented 22 сент. 2015 в 17:15
  • @Regent спасибо за уточнение, поправил ответ с учётом ваших замечаний.
    – Fenex
    Commented 22 сент. 2015 в 18:53
  • На здоровье. Про сокращение варианта "ну и циклы" стоит расписывать? И главное: почему в обоих случаях рассматривается только клик по <img>, а клик по checkbox игнорируется? Это ведь половина задачи.
    – Regent
    Commented 22 сент. 2015 в 18:57

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.