jquery-實現全選與不全選

jquery代碼:

省略引用jquery代碼。

<script type="text/javascript">

//全選
    $(function() {
        $("#selectAll").click(function() {
            if (this.checked) {
                $("#chapterlist :checkbox").each(function() {
                    this.checked = true;
                });
                $("#selectAll").attr("value", "反選");
            } else {
                $("#chapterlist :checkbox").each(function() {
                    this.checked = false;
                });
                $("#selectAll").attr("value", "全選");
            }
        });

        //設置全選複選框
        $("#chapterlist :checkbox[name!=all]").click(function() {
            allchk();
        });

        function allchk() {
            var objs = $("#chapterlist :checkbox[name!=all]");
            var chknum = objs.size();//選項總個數
            var chk = 0;
            objs.each(function(index, o) {
                if ($(o).is(":checked")) {
                    chk++;
                }
            });
            if (chknum == chk) {//全選
                $("#selectAll").attr("checked", true);
            } else {//不全選
                $("#selectAll").attr("checked", false);
            }
        }

    });
</script>
主體內容:
<table class="content" border="0" id="chapterlist">
                    <tr style="font-weight: bold;" class="listfirst">
                        <td width="10%">
                            <s:checkbox id="selectAll" fieldValue="" name="all"
                                onclick="selectAll()"></s:checkbox>
                            全選
                        </td>
                    </tr>
                    <s:iterator value="recordList" status="status">
                        <tr class="listcontetn">
                            <td width="10%">
                                <s:checkbox fieldValue="%{chapterId}" name="chapterIds"></s:checkbox>
                            </td>
                        </tr>
                    </s:iterator>
                </table>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章