jquery / javascript для пользователя, чтобы выбрать 1 из n изображений

Я хочу отобразить несколько изображений (возможно, максимум 5) и сделать так, чтобы пользователь щелкнул их. Первым делом я попробовал переключатели и вставил изображения в метки.

<input type="radio" name="BackgroundId" id="BackgroundId" value="1" />
<label for="BackgroundId"><img src="../../Content/images/thumb_1.jpg" /></label>

Firefox выбирает переключатель, когда пользователь нажимает на изображение, а IE - нет.

Есть ли плагин jquery, который сделает изображения кликабельными? Fancy-форма выглядит как то, что я мог бы использовать, но это не jquery, и у меня уже есть jquery в моем проекте.

Или кто-то может указать мне лучший способ выбора одного изображения?

2 ответа

Что-то вроде

$(function(){
    $("label img").click(function(){
        var parent = $(this).parent();
        $("#" + parent.attr("for")).attr("checked", "checked");
    });
});

Просто поместите этот javascript на свою страницу. Я проверил это.

<script language="javascript" type="text/javascript">
    $(document).ready(
    function ()
    {
        var selImg =  $("#BackgroundId").next("label").find("img");
        selImg.click(
            function ()
            {
                $("#BackgroundId")[0].click();
            });

    });
</script>

Код читает: Получить все следующие элементы после тех элементов, которые имеют id='BackgroundId'. Теперь найдите элемент img внутри каждого. Установите события щелчка, если каждый найденный img вызывает функцию, которая будет имитировать щелчок по всем тем элементам, которые имеют id='BackgroundId'.

Обратите внимание, что, хотя я пишу "все эти" и "каждый тег", поскольку существует только один тег с идентификатором "BackgroundId", все это происходит по-отдельности.

Другие вопросы по тегам