This is the default jQueryUI display as a Grid Layouts (demo here). I can select one at a time when using mouse pointer. I have to use Ctrl for multiple selections. How will I edit the code for multiple selections at once using just the mouse pointer?

CSS

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; }
    #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>

JavaScript

<script>
    $(function() {
        $( "#selectable" ).selectable();
    });
</script>     

HTML

 <div class="demo"> 
   <ol id="selectable">
     <li class="ui-state-default">1</li>
     <li class="ui-state-default">2</li>
     <li class="ui-state-default">3</li>
     <li class="ui-state-default">4</li>
     <li class="ui-state-default">5</li>
     <li class="ui-state-default">6</li>
     <li class="ui-state-default">7</li>
     <li class="ui-state-default">8</li>
     <li class="ui-state-default">9</li>
     <li class="ui-state-default">10</li>
     <li class="ui-state-default">11</li>
     <li class="ui-state-default">12</li>
   </ol>
 </div><!-- End demo -->
 
 <div class="demo-description">
   <p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
 </div><!-- End demo-description -->

This is the default jQueryUI display as a Grid Layouts (demo here). I can select one at a time when using mouse pointer. I have to use Ctrl for multiple selections. How will I edit the code for multiple selections at once using just the mouse pointer?

CSS

<style>
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; }
    #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
</style>

JavaScript

<script>
    $(function() {
        $( "#selectable" ).selectable();
    });
</script>     

HTML

 <div class="demo"> 
   <ol id="selectable">
     <li class="ui-state-default">1</li>
     <li class="ui-state-default">2</li>
     <li class="ui-state-default">3</li>
     <li class="ui-state-default">4</li>
     <li class="ui-state-default">5</li>
     <li class="ui-state-default">6</li>
     <li class="ui-state-default">7</li>
     <li class="ui-state-default">8</li>
     <li class="ui-state-default">9</li>
     <li class="ui-state-default">10</li>
     <li class="ui-state-default">11</li>
     <li class="ui-state-default">12</li>
   </ol>
 </div><!-- End demo -->
 
 <div class="demo-description">
   <p>To arrange selectable items as a grid, give them identical dimensions and float them using CSS.</p>
 </div><!-- End demo-description -->

• javascript
• jquery
• css
• jquery-ui

• 1 Show up the jQueryui's sources for .selectable(); – ted Commented Aug 18, 2012 at 16:30
• 1 I don't understand what are you talking about ? can you give me the code using jsfiddle – underscore Commented Aug 18, 2012 at 16:34
• Since you know about jsFiddle, it would be a good idea if you put the code there for everyone ;-) – andyb Commented Aug 18, 2012 at 16:38
• "How will I edit the code for multiple selections at once using just the mouse pointer?" <-- What does that mean? What are you trying to do? Style the selected items different? Do something with the selected items? – lbstr Commented Aug 18, 2012 at 16:39
• Anybody know how to do this ? i think it isn't big code – underscore Commented Aug 18, 2012 at 16:40

3 Answers 3

Found This Code Online. Is that what you are asking for?

Multiple Select With Ctrl

To be honest, the Ctrl + left click for selecting multiple items is pretty standard UI behaviour and built-in to the jQueryUI Selectable. Did you also know you can left click and drag a focus over multiple items to select them?

However, I can see an advantage in offering the behaviour in question, so how about using left click or drag to select and then left click and drag to also de-select?

It may not be the most efficient way of doing it, but after playing around with the in-built callbacks, I've e up with something that seems to work. Based on the code in your question I've hooked into the in-built callback functions to store what was selected and also handle the selection removal. JavaScript duplicated below but demo here.

JavaScript

var $currentlySelected = null;
var selected = [];

$('#selectable').selectable({
    start: function(event, ui) {
        $currentlySelected = $('#selectable .ui-selected');
    },
    stop: function(event, ui) {
        for (var i = 0; i < selected.length; i++) {
            if ($.inArray(selected[i], $currentlySelected) >= 0) {
              $(selected[i]).removeClass('ui-selected');
            }
        }
        selected = [];
    },
    selecting: function(event, ui) {
        $currentlySelected.addClass('ui-selected'); // re-apply ui-selected class to currently selected items
    },
    selected: function(event, ui) {
        selected.push(ui.selected); 
    }
});

http://jqueryui./demos/button/#checkbox Looks like the thing you are looking for