您的位置:首页 > Web前端 > JQuery

jquery全选框的实现

2016-05-26 14:59 639 查看
函数实现的话:

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


  

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: