JS实现单选、多选、全选、反选

HTML

    
        
        
        
        
    

    
        
商品列表
        笔记本3000元

        HTC手机2500

        苹果电脑8000

        IPAD1500

        玩具汽车400


        全选

        反选


        总金额：
        
    

choose.js

$(function(){
    Buy();
})

function Buy(){
    //遍历复选框
    $("input[name=item]").each(function(){
        $(this).click(function(){
            count();
            chooseAll();
        })
    })
    //全选
    $("#all1").click(function(){
        $("input[name=item]").each(function(){     
            $(this).attr("checked", "checked");
        })
        $("#all2").attr("checked", "");
        count();
    })
    //反选
    $("#all2").click(function(){
        $("input[name=item]").each(function(){
            if(this.checked){
                $(this).attr("checked", "")
            }else{
                $(this).attr("checked", "checked")
            }
            $("#all1").attr("checked", "");
            chooseAll();
            count();
        })

    })
}
//统计总金额
function count(){
    var checked = $("input[name=item]:checked");
    var all = $("input[name=item]");
    var sum = 0;
    for(var i = 0; i < checked.length; i ++){
        sum += checked[i].value/1;
    }

    $("#sumId").html(sum + "元");
}
//判断是否为全选
function chooseAll(){
    var checked = $("input[name=item]:checked");
    var all = $("input[name=item]");
    if(checked.length == all.length){
        $("#all1").attr("checked", "checked");
    $("#all2").attr("checked", "");
    }
}