본문 바로가기
jQuery/Cookbook

jQuery를 이용한 다중 체크박스 제어

by BlackNoise 2016. 10. 12.


소스

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    </head>
    <body>
        <table width="800" border="1" cellpadding="0" cellspacing="0">
            <colgroup>
                <col width="40px"><col width="40px"><col width="*">
            </colgroup>
            <tbody>
                <tr>
                    <th><input type="checkbox" name="check_all" style="width: 20px; height: 20px; "></th>
                    <th colspan="2">다중 체크박스 제어</th>
                </tr>
                <tr>
                    <th><input type="checkbox" name="order[]" style="width: 20px; height: 20px;" value="A12345"></th>
                    <td style="text-align: left; padding-left: 5px;" colspan="2"></td>
                </tr>
                <tr>
                    <td></td>
                    <th><input type="checkbox" name="no[]" class="A12345" data-order="A12345" style="width: 20px; height: 20px;" value="119664"></th>
                    <td style="text-align: left; padding-left: 5px;"></td>
                </tr>
                <tr>
                    <th><input type="checkbox" name="order[]" style="width: 20px; height: 20px;" value="B12345"></th>
                    <td style="text-align: left; padding-left: 5px;" colspan="2"></td>
                </tr>
                <tr>
                    <td></td>
                    <th><input type="checkbox" name="no[]" class="B12345" data-order="B12345" style="width: 20px; height: 20px;" value="119516"></th>
                    <td style="text-align: left; padding-left: 5px;"></td>
                </tr>
                <tr>
                    <td></td>
                    <th><input type="checkbox" name="no[]" class="B12345" data-order="B12345" style="width: 20px; height: 20px;" value="119517"></th>
                    <td style="text-align: left; padding-left: 5px;"></td>
                </tr>
            </tbody>
        </table>
 
        <script type="text/javascript">
            $(document).ready(function() {
 
                var $checkAll = $("input:checkbox[name='check_all']");
                var $order = $("input:checkbox[name='order[]']");
                var $no = $("input:checkbox[name='no[]']");
 
                // 전체 선택
                $checkAll.on("click", function(e) {
                    var check = $(this).is(":checked");
 
                    $order.trigger("click");
                });
 
                // 그룹 선택
                $order.click(function(e) {
 
                    var value = $(this).val();
 
                    var check = $(this).is(":checked");
                    $("." + value).prop("checked", check);
                });
 
                // 단위 선택
                $no.click(function(e) {
 
                    var value = $(this).data("order");
 
                    var count = 0;
                    var orderCount = 0;
                    $no.each(function(i, v) {
                        var check = $(this).is(":checked");
                        if (check) {
                            count++
                            if (value == $(this).data("order")) {
                                orderCount++
                            }
                        }
                    });
 
                    if (parseInt($("." + value).length) == orderCount) {
                        orderChecked(value, true);
                    } else {
                        orderChecked(value, false);
                    }
 
                    if (parseInt($no.length) == count) {
                        $checkAll.prop("checked", true);
                    } else {
                        $checkAll.prop("checked", false);
                    }
                });
 
                function orderChecked(value, checked) {
                    $order.each(function(i, v) {
                        if ($(this).val() == value) {
                            $(this).prop("checked", checked);
                        }
                    });
                }
            });
        </script>
    </body>
</html>
cs





저작자표시 비영리 동일조건

'jQuery > Cookbook' 카테고리의 다른 글

jQuery를 이용한 레이어 팝업 구현하기  (0) 2016.05.04
jQuery를 이용한 자동 롤링배너 구현하기  (7) 2016.05.04
jQuery를 이용한 탭 기능 구현하기  (0) 2016.05.04

관련글

티스토리툴바