Any way to select all option and unbind all selected option.

[shinjonghwan]

Thanks for this awesome image-picker plugin in advance. I stuck with some problem at the moment. I want to make button, which selects all option at one click. And also want to make other button, which will unbind all selected option. Is there any way to implement this function?

[SgtOddball]

It just so happens I've done this before (though it does use the same button to toggle on/off but it should give you enough of an idea to be getting on with).

It also uses jQuery but again, it should at least give you an idea of what to do.

...
<div role="group" aria-label="Image Option Buttons">
    <div class="btn-group">
        <a href="#" id="toggleAll" data-toggle="button" aria-pressed="false" autocomplete="off" >
            Select All
        </a>
    </div>
</div>
...
<select multiple='multiple' class='image-picker show-labels show-html hide' name='imageList'>
...

$('#toggleAll').on('click',function(){
// click event listener 
    if($(this).attr('aria-pressed')=='false'){
    //checks if toggled on or off, any other property can be used
        $('.image-picker').find($('option')).prop("selected", "selected");
        //looks for the image picker option list and sets everything to selected
        $('.image-picker').data('picker').sync_picker_with_select();
        //now triggers the sync function to reinitialise all of the selected images. 
    }else{
               //does the exact opposite of above. 
        $('.image-picker').find($('option')).prop("selected", false);
        $('.image-picker').data('picker').sync_picker_with_select();
    }
})

[shinjonghwan]

@SgtOddball How lovely it is.. Thank you so much for this awesome recipe. It works for me as well. Thank you very much indeed.

[SgtOddball]

I must admit the .sync_picker_with_select() seems to be a trick that everyone misses. Once you've seen it done it manages to solve most problems with remote functions on image-picker.

[rvera]

Thanks @SgtOddball, you are awesome.