有意思的排他思想小案例

排他思想

首先排除其他人 然后设置自己的样式 这种排除其他人的思想我们称为排他思想。
排他思想在页面中非常常见与重要，我们常见的轮播图，转换点击等等都需要用到排他思想。
让我们来看看下面的一些简单小案例，也可以试着做一做。
（1）首先是基础的几个小按钮，点谁谁怀孕。

（2）接下来就是选老婆环节，点击那个图片就换成哪个图片作为背景

（3）这是一个tab栏切换的例子。

（4）这是一个全选反选的例子。

展示一下第四个例子的代码吧
HTML部分

<table>
        <thead>
            <tr>
                <th><input type="checkbox" id="j_cbAll"></th>
                <th>商品</th>
                <th>价钱</th>
            </tr>
        </thead>
        <tbody id="j_tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>iPhone13</td>
                <td>6000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipad Pro</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>ipad air</td>
                <td>2000</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Apple Watch</td>
                <td>2000</td>
            </tr>
        </tbody>
    </table>

CSS部分

<style>
        table{
    
    
            margin: 100px auto;
            border-collapse: collapse;
            font-size: 14px;
            width: 300px;
            border: 1px solid #c0c0c0;
            border-spacing: 0;
        }
        th,td{
    
    
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        th {
    
    
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td {
    
    
            font: 14px "微软雅黑";
        }
        
        tbody tr {
    
    
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
    
    
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>

JS部分

<script>
        //获取元素
        var j_cbAll=document.getElementById('j_cbAll');
        var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');//下面所有的复选框
        //注册事件
        j_cbAll.onclick=function(){
    
    
            //this.checked 他可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
            // console.log(this.checked);
            for(var i=0;i<j_tbs.length;i++){
    
    
                j_tbs[i].checked=this.checked;
            }
        }
        for(var i=0;i<j_tbs.length;i++){
    
    
            j_tbs[i].onclick=function(){
    
    
                var flag=true;
                //每次点击下面的复选框 都要循环检查4个小按钮是否全被选中
                for(var i=0;i<j_tbs.length;i++){
    
    
                    if(!j_tbs[i].checked){
    
    
                        console.log(!j_tbs[i].checked);
                        flag=false;
                        break;//退出for循环 可以提高效率 只要有一个没被选中，剩下的无需判断了
                    }
                }
                j_cbAll.checked=flag;
            }
        }
    </script>

以上就是今天的分享了！