http://jsfiddle.net/jEADR/62/ select2 demo

index.html

<!--<script type="text/javascript" src="https://select2.github.io/vendor/js/jquery.min.js"></script>-->
<script type="text/javascript" src="https://select2.github.io/dist/js/select2.full.js"></script>

<!--<link href="https://select2.github.io/css/bootstrap.css" type="text/css" rel="stylesheet" />-->
<link href="https://select2.github.io/dist/css/select2.min.css" type="text/css" rel="stylesheet" />


<select multiple id="e1" style="width:300px">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select>
<input type="checkbox" id="checkbox" >Select All

<input type="button" id="button" value="check Selected">

javascript.js

$("#e1").select2();
$("#checkbox").click(function(){
    if($("#checkbox").is(':checked') ){
        $("#e1 > option").prop("selected","selected");
        $("#e1").trigger("change");
    }else{
        $("#e1 > option").removeAttr("selected");
         $("#e1").trigger("change");
     }
});

$("#button").click(function(){
       alert($("#e1").val());
});