前端：checkbox全选和取消全选 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选与反选</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    $(function(){
        //实现全选与反选
        $("#allAndNotAll").click(function() { 
            if (this.checked){  
                $("input[name='items']:checkbox").each(function(){ 
                      $(this).attr("checked", true);  
                });
            } else {   
                $("input[name='items']:checkbox").each(function() {   
                      $(this).attr("checked", false);  
                });
            }  
        });
        
        //获取被选中的id
        $('#getAllSelectedId').click(function(){
            var ids=[];
            $("input[name='items']:checked").each(function(){ 
                  ids.push($(this).attr("id"));  
            });
            
            var delIds=ids.join(","); 
            console.log(delIds);
            
            //可以将delIds通过jquery ajax传到后台了,在后台采用String接收这个delIds参数,然后采用split(",")分隔得到一个
            //String[]的id数组。可以参考我的博客：http://blog.csdn.net/u013871100/article/details/52740061
            
        });
    });
</script>
</head>
<body>
	
	员工列表:<br><br>	
	<input type="checkbox" name=items id="001"/>刘德华 <br>
	<input type="checkbox" name=items id="002"/>张学友 <br>
	<input type="checkbox" name=items id="003"/>黎明 <br>
	<input type="checkbox" name=items id="004"/>郭富城 <br>
	
	<br><br>
	<input type="checkbox" id="allAndNotAll" />全选/反选<br><br>
	<input type="button" id="getAllSelectedId" value="获取被选中的id"/><br>
	
</body>
</html>

　　

posted @ 2018-09-05 14:52  桃源仙居  阅读(133)  评论(0)    收藏  举报