• 【jQuery】复选框的批量处理:全选、非全选


        近期工作都在写jQuery,其实我并没有系统学过js。今天跟大家分享一下近期写的一个有关复选框的批量处理。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>測试</title>
    </head>
    <body>
    	<input type="button" class="button" onclick="delChecked()" value="删除所选">
    	<table border="1px">
    		<tr>
    			<td>
    				<input type="checkbox" id="city" value="0" name="city_qx">
    			<label for="city">全选</label>
    			</td>
    			<td>城市</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td>			
    			<td>广州市</td>
    		</tr>
    		<tr>
    			<td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td>
    			<td>深圳市</td>
    		</tr>	
    		<tr>
    			<td><input type="checkbox" value='+this.id+' onClick="isChecked($(this))" name="city"></td>
    			<td>杭州市</td>
    		</tr>	
    	</table>
    </html>

     这里的复选框批量处理是删除操作。当选择“全选”button时,其它的复选框也会所有选中,这样的“全选”复选框一般用在列表中,选中之后列表的所有列都会选中。

    选中之后若把列表中当中一行复选框去掉。全选的复选框也要不选中。当点击“删除所选”button的时候要删除选中复选框所在的行。

        以下是JQ代码:
    <script>
    $(function(){
    	//全选
    	$(":input[name='city_qx']").click(function(){
    		if($(this).attr("checked") == true){
    			$(":input[name='city']").attr("checked",true);
    		}else{
    			$(":input[name='city']").attr("checked",false);
    		};
    	});
    })
    function isChecked(obj){
    	//非全选
    	if(obj.attr("checked") == false){
    		$(":input[name='city_qx']").attr("checked",false);
    	}
    }
    //删除
    function del(id,obj){
    	$.ajax({
    		 //略
    	})
    }
    //删除所选
    function delChecked(){
    	$("input[name='city']:checked").each(function () {
            del($(this).val(),$(this));
        });
    }
    </script>

        大家略作參考吧。



    Author:立礼
    Sign:人生不要有太多的幻想,而要有很多其它的行动。

  • 相关阅读:
    HDU2037
    python爬取邮箱
    HDU1058
    opengl 光照
    HDU1421
    <cocos2dx for window phone>一个简单的打地鼠游戏
    <cocos2dx for wp7>使用cocos2dx制作基于Tile地图的游戏:加入敌人和战斗(三)
    <WP7>(五)手把手教你写天气预报程序:ApplicationBar的使用和ListPicker的数据绑定
    <cocos2dx for wp7>在cocos2dx里面手势识别
    <cocos2dx for wp7>使用cocos2dx制作基于Tile地图的游戏:碰撞检测和收集物品(二)
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/6801247.html
Copyright © 2020-2023  润新知