Как я могу создать флажок для изображений с помощью jquery - PullRequest
Новая
       15

Как я могу создать флажок для изображений с помощью jquery

3 голосов
/ 30 августа 2011

Я пытался создать флажок для изображений, чтобы при наличии нескольких изображений я мог выбрать 3 или 4 изображения, прежде чем продолжить. Я видел подобные вещи, но я не знаю, как создать то же самое с помощью jquery.

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

example

Ответы [ 2 ]

3 голосов
/ 30 августа 2011

Этого может быть достаточно для ваших нужд. Конечно, вы можете редактировать скрипт и CSS так, как вам нравится: 

$('.image-checkbox-container img').live('click', function(){
    if(!$(this).prev('input[type="checkbox"]').prop('checked')){
        $(this).prev('input[type="checkbox"]').prop('checked', true).attr('checked','checked');
        this.style.border = '4px solid #38A';
        this.style.margin =' 0';
    }else{
        $(this).prev('input[type="checkbox"]').prop('checked', false).removeAttr('checked');
        this.style.border = '0';
        this.style.margin = '4px';
    }
});

CSS: 

.image-checkbox-container input[type="checkbox"]{
    display: none;
}

.image-checkbox-container img{
    border: 0;
    margin: 4px;
}

Вот пример JSFIddle

0 голосов
/ 30 августа 2011

Одна из многих возможных реализаций.Здесь я предполагаю, что вы заранее сгенерируете список изображений и соответствующих флажков (не с помощью javascript).

HTML (в разрезе): 

<div id="selectable_images">
   <img src="/image1.jpg" rel="ch_image_1"/>
   <input style="display:none" type="checkbox" id="ch_image_1" value="image1.jpg"/>

   <img src="/image2.jpg" rel="ch_image_2"/>
   <input style="display:none" type="checkbox" id="ch_image_2" value="image2.jpg"/>

   <img src="/image3.jpg" rel="ch_image_3"/>
   <input style="display:none" type="checkbox" id="ch_image_3" value="image3.jpg"/>
</div>

JS (jQuery): 

$(function() {
    $("#selectable_images img").click(function() {
       var $this = $(this);
       if ($this.hasClass('selected')) {
           $("#"+this.rel).attr('checked', false);
           $this.removeClass('selected');
       } else {
           $("#"+this.rel).attr('checked', true);
           $this.addClass('selected');
       }
    })
}

При нажатии на изображения соответствующие флажки будут переключаться.Выбранное изображение получит «выбранный» класс.

...