js实现全选与全部取消功能

js实现全选功能

在数据列表页面中经常会用到全选或者全部取消功能，如下：


这里实现了一个简单的全选功能：当有任何一个子元素未被选中时，点击全选会标记所有元素为选中；当所有元素已选中时，点击选中则会取消所有的选中。这里使用checkbox做为选择的元素，为了便于server端的处理，给每个checkbox相同的名字，这样被选中checkbox的值就会被提交到server端进行处理。

用到的js如下：

function checkAll() {
	//把所有参与选择的checkbox使用相同的name，这里为"num_iid"
    var eles = document.getElementsByName("num_iid");
    var i = 0;
	// 如果是全选状态，则取消所有的选择
    if (isSelectAll() == true) {
		for ( i = 0; i < eles.length; i++) {
			eles[i].checked = false;
        }
        document.getElementById("selectAll").checked = false;
    } else {
		// 否则选中每一个checkbox
        for ( i = 0; i < eles.length; i++) {
            eles[i].checked = true;
        }
    }
}
// 判断当前是否为全选状态
function isSelectAll() {
    var isSelected = true;
    var eles = document.getElementsByName("num_iid");
    for (var i = 0; i < eles.length; i++) {
		if (eles[i].checked != true) {
			isSelected = false;
        }
    }
    return isSelected;
}
// 选择任意一个非全选checkbox
function checkOne() {
    if (isSelectAll()) {
		document.getElementById("selectAll").checked = true;
    } else {
		document.getElementById("selectAll").checked = false;
	}
}

页面代码如下：

<table>
	<tr>
		<td colspan="7">
				<input id="selectAll" type="checkbox" onclick="javascript: checkAll()"/> 全选 &nbsp;&nbsp;&nbsp;&nbsp;
				<button onclick="onShelf()">上架</button>
        </td>
    </tr>
    @foreach (var item in @Model.Items)
    {
		<tr>
			<td colspan="7" class="noborder"  style="height: 24px; background-color: #E8F2FF">
				<input type="checkbox" name="num_iid" value="@item.NumIid" onclick="checkOne()" runat="server"/>
                @if (!string.IsNullOrWhiteSpace(item.OuterId))
				{
                    <text>商家编码：</text> @item.OuterId
                }
            </td>
        </tr>
        <tr>
			<td class="noborder">
				<div class="smallpicdiv" style="margin-left: 20px;">
					<a href="../Item/ItemDetail?numIid=@item.NumIid" title="查看宝贝详情" target="_blank">
                    <img src="@item.PicUrl" class="smallpic" alt="点击查看宝贝详情" />
					</a>
				</div>
				@item.Title
            </td>
		</tr>
	}
</table>