[JS] jQuery 리스트 체크박스 group / 전체선택/해제 /Checkbox

리스트를 만들면서, checkbox로 선택, 선택해제 하는 게시판을 만들 때 

딴에는 기억해둔다고 포스팅을 하였다. http://daydreamer-92.tistory.com/23

리스트 체크박스 전체선택 / 해제 하는 소스라며 자신있게 적어놓았는데 어찌나 창피한지.

클래스를 준 후 그 클래스에 해당하는 태그가 전체 선택, 해제 하는 함수로 넘어가는거였는데 하하

1.

먼저 리스트의 상단이 되는 Top을 checkbox-head 클래스로 주고 group-list(임의의 class 이름)로 클래스를 준다.

<th><input type="checkbox" id="groupCheckbox" name="groupCheckboxTop" class="checkbox-head group-list"/><label style='margin-right:10px;' for='groupCheckbox'></label></th>

2. 

다음 리스트가 추가되며 뿌려지는 행에 checkbox-item 클래스를 주고 아까 임의의 class이름을 준것과 같은 이름으로 클래스를 준다(group-list)

"<td><input type='checkbox' id='groupCheckbox"+i+"' name='groupCheckbox' class='checkbox-item group-list' value='"+dataObject.group_id +"'/><label style='margin-right:10px;' for='groupCheckbox"+i+"'></label></td>"

3. 

그리고 ready 부분에서 list group name으로 checkbox action을 준다.

$.checkboxGroup('group-list');

4. 

그럼 나의경우에는 custom.js에 있는 $.checkboxGroup이라는 함수로 이동한다.

custom.js 에는 체크박스 전체선택, 해제하는 공통 함수가 들어있다.

아까 지정해준 group-list는 아래의 group_name이 되어 리스트의 체크박스를 제어하게 된다.

(function($) {
    // check box multiple select / deselect
    $.checkboxGroup = function(group_name) {
        // multiple select, deselect
        $(document).delegate('.' + group_name + '.checkbox-head', 'change', function(ev) {
            $('.' + group_name + '.checkbox-item').prop('checked', $('.' + group_name + '.checkbox-head').prop('checked'));
        });
 
        // if all checkbox are selected, check the selecta ll checkbox and
        // viceversa
        $(document).delegate(
                '.' + group_name + '.checkbox-item',
                'change',
                function(ev) {
                    $('.' + group_name + '.checkbox-head').prop('checked',
                            $('.' + group_name + '.checkbox-item').length == $('.' + group_name + '.checkbox-item:checked').length);
                });
    };
 
})(jQuery);