JQuery中的全选、反选、批删、即点即改

<pre name="code" class="php"><div class="headbar">
	<div class="position">
		<span>练习</span>
		<span>></span>
		<span>练习列表管理</span>
		<span>></span>
		<span>练习列表</span>
	</div>
	<div class="operating">
		<a href="javascript:void(0)" oncilck="selectAll">
			<button id="quan">全选</button>
		</a>
		<!--    -->
		<a href="javascript:void(0)">
			<button id="fan">反选</button>
		</a>
		<!--    -->
		<a href="javascript:void(0)">
			<button id="qbx">全不选</button>
		</a>
		<!--    -->
		<a href="javascript:void(0)">
			<button id="delAll">批量删除</button>
		</a>
	</div>
	<div class="field">
		<table class="list_table">
			<col width="180px" />
			<col width="251px" />
			<col />
			<col width="150px" />
			<col />
			<col width="200px" />
			<thead>
				<tr>
					<th>选择</th>
					<th>名称</th>
					<th>状态(锁定未锁定)</th>
					<th>操作</th>
				</tr>
			</thead>
		</table>
	</div>
</div>
<div class="content">
	<form method='post' action='{url:/market/pro_rule_del}'>
		<table class="list_table">
			<col width="180px" />
			<col width="251px" />
			<col />
			<col width="150px" />
			<col />
			<col width="200px" />
			<tbody>
				 {foreach:items=$this->list}
					 {if:$item['is_del'] == 0}
						<tr id="{$item['id']}">
							<td>
								<input type='checkbox' name='id[]' value='{$item['id']}' />
							</td>
							<td>
								<span id="name">
									{$item['username']}
								</span>
							</td>
							<td>
								{echo:($item['status']==1) ? '锁定':'未锁定'}
							</td>
							<td>
								<a href="#">单删</a>
							</td>
						</tr>
					{/if}
				{/foreach} 
			</tbody>
		</table>
	</form>
</div>
<script>
	//全选
	$('#quan').click(function(){
		$("input[name='id[]']").each(function() 
		{ 
			this.checked = true; 
		});
	});
	//反选
	$('#fan').click(function(){
		$("input[name='id[]']").each(function() 
		{ 
	        if (this.checked == true) 
	        { 
	        	this.checked = false; 
	        }
	        else 
	        { 
	        	this.checked = true; 
	        } 
    	}) 
	});
	//全不选
	$('#qbx').click(function(){
		$("input[name='id[]']").each(function() 
		{ 
			this.checked = false; 
		});
	});
	//批量删除
	$('#delAll').click(function()
	{
		var arrUserid = "";
        var url = "{url:lianxi/delall}";
        $("input[name='id[]']").each(function() 
        {
            if (this.checked == true)
            {
                arrUserid += $(this).val() + ",";
            }
        }); 
        $.get(url,{id:arrUserid},function(e)
        {
            if(e == 1)
            {
            	$("input[name='id[]']").each(function() 
        		{
        			if(this.checked == true)
        			{
        				$(this).parents('tr').remove();
        			}		
        		});
        		alert('删除成功');
            }
            else
            {
                alert('删除失败');
            }
        });
	});

	//即点即改
	//变成文本框
	$(document).on('click','#name',function(){
		var _this = $(this);
		var username = _this.html();
		_this.parent().html('<input type="text" name="username" value='+username+'/>');
	});
	//将文本变成span标签
	$(document).on('blur','input[name="username"]',function(){
		var _this = $(this);
		var username = _this.val();
		var id = _this.parents('tr').attr('id');
		var url = "{url:lianxi/saveInfo}";
		$.get(url,{'username':username,'id':id},function(msg){
			if(msg == 1)
			{
				_this.parent().html("<span id='name'>"+username+"</span>");
			}
			else
			{
				alert('修改失败');
			}
		})
	});
</script>