jquery全选框的实现

时间：2023-12-12 08:37:56

函数实现的话:

head里加入函数实现

<script language="javascript" type="text/javascript">

    //全选、取消全选的事件

    function selectAll() {

	//#checkedAll是全选的那个checkbox

        if ($("#cbSelectAll").attr("checked")) {

	//：checkbox  是选中了所有的<input> type为 checkbox的对象

            $(":checkbox").attr("checked", true);

        } else {

            $(":checkbox").attr("checked", false);

        }

    }

</script>

调用处:

<div class="ItemBlockBorder">

    <div class="ItemBlock">

         <table cellpadding="0" cellspacing="0" class="mainForm">

	　　 <!--表头-->

　　　　　　  <thead>

		<tr align="LEFT" valign="MIDDLE" id="TableTitle">

	　　　　　　 <td width="300px" style="padding-left: 7px;">

			<!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 -->

			<input type="checkbox" id="cbSelectAll" onClick="selectAll()"/>

			<label for="cbSelectAll">全选</label>

		   </td>

		</tr>

	   </thead>

	   <!--显示数据列表-->

	　 <tbody id="TableData">

		<tr class="TableDetail1">

		<!-- 显示权限树 -->

		　　<td>

			<s:checkboxlist name="privilegeIds" list="#privilegeList" listKey="id" listValue="name"></s:checkboxlist>

		　　</td>

		</tr>

	　　</tbody>

        </table>

      </div>

 </div>

也可以调用处直接使用jquery的选择器:

<input type="checkbox" id="cbSelectAll" onClick="$('[name=privilegeIds]').attr('checked', this.checked)"/>

　　

　　

相关文章