select2 라이브러리 활용시 전체체크 전체 해제

select2 라이브러리 활용시 전체체크 전체 해제

select2 에서 멀티 클릭시 아래 그림처럼 tag 형식으로 보여줄수 있습니다.

또한 select all 클릭 모든 항목이 체크될수 있도록 할수도 있습니다.

소스코드

<script type="text/javascript">
    $(document).ready(function() {
        var airlineCode = <?=json_encode($airlineCode)?>;
        $("#airlinecdModify").select2({
            placeholder: 'Select airline',
            //templateResult: formatState,
            closeOnSelect: false,
            //allowClear: true,
            multiple: true,
            tags: true,
            data: airlineCode
        });
 
 
    });
    function formatState (state) {
        if (!state.id) {
            return state.text;
        }
        var baseUrl = "http://xxx.com/air";
        var $state = $(
            '<span><img width="13" src="' + baseUrl + '/' + state.element.value.toUpperCase() + '.gif" class="img-flag" /> ' + state.text + '</span>'
        );
        return $state;
    };
 
 
    $("#airlinecdModify").select2();
    $("#allCheckbox").click(function(){
        if($("#allCheckbox").is(':checked') ){
            $("#airlinecdModify > option").prop("selected","selected");
            $("#airlinecdModify").trigger("change");
        }else{
            $("#airlinecdModify > option").removeAttr("selected");
            $("#airlinecdModify").trigger("change");
        }
    });
 
    if( $('#airlinecdModify option:selected').length == <?=count($airlineCodeUnique)?> ) $("#allCheckbox").prop("checked","checked");
 
</script>

<tr>
    <th class="required_field_block">항공사<span class="required_icon"></span></th>
    <td class="form-inline" colspan="5">
        &nbsp;&nbsp;
        <input type="checkbox" id="allCheckbox" style="-ms-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);-o-transform: scale(2);padding: 10px;margin:10 10">
        &nbsp;Select All<br><br>
        <select style="width:950px" multiple="multiple" name="airlinecd[]" id="airlinecdModify" class="isNotNull" >
        </select>
    </td>
</tr>