jQuery 全选，反选，取消

预览

源码

DOCTYPE html>


    
    Title
	
	



全选
反选
取消

   
    
        #
        姓名
        爱好
    
   
    
    
        
        郭德纲
        开车，京剧
    
    
        
        岳云鹏
        做饭
    
    
        
        于谦
        喝酒，抽烟，烫头
    
    




// 点击全选按钮 选中所有的checkbox
// DOM绑定事件方法
// $("#all")[0].onclick = function(){}
// jQuery绑定事件方法
$("#all").click(function () {
    $(":checkbox").prop('checked', true);
});
// 取消
$("#cancel").on("click", function () {
     $(":checkbox").prop('checked', false);
});
// 反选
$("#reverse").click(function () {
    // 1. 找到所有选中的checkbox取消选中
    // $("input:checked").prop('checked', false);
    // // 2. 找到没有选中的checkbox选中
    // $("input:not(:checked)").prop('checked', true);
    //你会发现上面这么写，不行，为什么呢？因为你做了第一步操作之后，再做第二步操作的时候，所有标签就已经全部取消选中了，所以第二步就把所有标签选中了

    // 方法1. for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中
    var $checkbox = $(":checkbox");
    for (var i=0;i