JQuery (전체 선택 과 반 선택 기능)

2302 단어 jquery
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
           
        $(function () {
            /*       */
            $("#all").click(function () {            
                $(".item").attr("checked", $("#all").prop("checked"));
            });

            /* checkbox      ,     ,      */
            $(".item").click(function () {
                if ($("input[class='item']:checked").size() == 7) {
                    $("#all").attr("checked", true);
                } else {
                    $("#all").attr("checked", false);
                }
            });

            /*       */
            $("#ops").click(function () {
                $(".item").each(function () {
                    $(this).attr("checked", !this.checked);
                });
            });
        });

      
    </script>
</head>
<body>
    <label>  </label><input type="checkbox" id="all" /><br />
    <label>  </label><input type="checkbox" id="ops" /><br />
    <label>1,</label><input type="checkbox" class="item" /><br />
    <label>2,</label><input type="checkbox" class="item" /><br />
    <label>3,</label><input type="checkbox" class="item" /><br />
    <label>4,</label><input type="checkbox" class="item" /><br />
    <label>5,</label><input type="checkbox" class="item" /><br />
    <label>6,</label><input type="checkbox" class="item" /><br />
    <label>7,</label><input type="checkbox" class="item" /><br />
</body>
</html>

좋은 웹페이지 즐겨찾기