jquery-实现全选与不全选
更新:HHH   时间:2023-1-7


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>

返回web开发教程...