JQuery怎么实现选中checkbox复选框及全选，然后更改父级边框li的边框颜色？

JQuery怎么实现选中checkbox复选框及全选，然后更改父级边框li的边框颜色？类似于卡片选中的效果

全选就是获取所有的给其 checked=true ;反选反之。
更改 li颜色。那你先获取选中的 checkbox然后获取其父元素设置 css就行

我之前写过原生的复选框选择及全选，你可以参考这个思路写jq的，思路一模一样，后在选中的时候将父级边框li的颜色js动态修改就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       table{
           border-collapse: collapse;
           text-align: center;
           margin: 100px auto;
           border: 1px solid #999;
       }
       thead th{
           background-color: #87ceeb8c;
       }
       th,td{
           border: 1px solid #999;
           padding: 0 10px;
       }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" id="chAll"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>李宁衣服</td>
                <td>500</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>汇源果汁</td>
                <td>5</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>鸿星尔克鞋子</td>
                <td>150</td>
            </tr>
        </tbody>
    </table>
    <script>
        //表单全选,取消全选 循环让下面的checked属性跟随总复选框即可
        var chAll = document.getElementById('chAll');
        var tdIpts = document.querySelector('tbody').getElementsByTagName('input');
        // 为总复选框注册事件
        chAll.onclick = function(){
            // console.log(this.checked);  // true/false
            for (var i=0;i<tdIpts.length;i++){
                tdIpts[i].checked = this.checked;
            }
        }

        //为下面的小复选框注册事件，当全部选中时，总复选框也选中，当其中有一个么选中时，复选框取消选中
        for (var i=0;i<tdIpts.length;i++){
            tdIpts[i].onclick = function(){
               var flag = true; // flag控制全选按钮是否选中
               //检查所有的小复选框的选中状态 
                for (var i=0;i<tdIpts.length;i++){
                   if(!tdIpts[i].checked){  // 如果有一个么有选中，flag=false,且break退出
                        flag = false;
                        break;
                    }
                }
                chAll.checked = flag;
            }
        }
    </script>
</body>
</html>

绑定onclick事件，判断是否已经选择了
选择了就取消反正选择
然后计算是否已经全部选择了如果全部选择了，就提示全部选择