jquery全选框的实现

函数实现的话:

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)"/>

  

  

原文地址:https://www.cnblogs.com/wujixing/p/5531152.html