Select2 3.x Selectboxes

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<select name="sel-01" id="sel-01" class="select2-multiple">
    <option></option>
    <option value="AL">Alabama</option>
    <option value="CA">California</option>
    <option value="NY">New York</option>
    <option value="TX">Texas</option>
    <option value="WY">Wyoming</option>
</select>


<input type="checkbox" id="checkbox" >Select All

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

CSS

.select2-result-label .wrap:before{
    position:absolute;
    left:4px;
    font-family:fontAwesome;
    color:#999;
    content:"\f096";
    width:25px;
    height:25px;
    
}
.select2-result-label .wrap.checked:before{
    content:"\f14a";
}
.select2-result-label .wrap{
    margin-left:15px;

}

JavaScript

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

$("#button").click(function(){
       alert($("#sel-01").val());
});

// get/set checked via `.data`, `.val` is't working yet