checked的妙用

記錄最近工作中 學到用單選checked屬性的妙用
以下是功能的實現 想要美化自由發揮吧

Tabs選項卡

<style type="text/css">
    .tab{width: 500px;margin-left: 100px;margin-bottom: 20px;}
    .tab-main{border: 1px solid #ccc;text-align: center;padding: 50px;margin-top:-1px; }
    .tab label{padding: 0 10px;display: inline-block;border: 1px solid #ccc;}
    .tab input{display: none;}
    .tab-content{display: none;}    
    .tab input:checked + label{color:red;}
    .tab input:nth-of-type(1):checked ~ div .tab-content:nth-of-type(1),
    .tab input:nth-of-type(2):checked ~ div .tab-content:nth-of-type(2),
    .tab input:nth-of-type(3):checked ~ div .tab-content:nth-of-type(3),
    .tab input:nth-of-type(4):checked ~ div .tab-content:nth-of-type(4){display: block;}
</style>

<div class="tab">
    <input type="radio" checked name="tab" id="tab1">
    <label for="tab1">tab1</label>
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">tab2</label>
    <input type="radio" name="tab" id="tab3">
    <label for="tab3">tab3</label>
    <input type="radio" name="tab" id="tab4">
    <label for="tab4">tab4</label>
    <div class="tab-main">
        <div class="tab-content">1</div>    
        <div class="tab-content">2</div>    
        <div class="tab-content">3</div>    
        <div class="tab-content">4</div>
    </div>
</div>

實現效果

摺疊面板

<style type="text/css">
    .collapse{width: 500px;margin-left: 100px;background-color: #fafafa;margin-bottom: 20px;}
    .ollapse-item{width: 100%;border: 1px solid #d9d9d9;margin-top: -1px;position: relative;}
    .collapse-header{height: 50px;width: 100%;}
    .collapse input[type="radio"]{position: absolute;width: 100%;height: 50px;margin: 0;left: 0;top: 0;opacity: 0;z-index: 1;}
    .collapse-header {position: relative;}
    .collapse-header svg{width: 15px;height: 15px;position: absolute;left: 10px;top: 33%;transition: all .3s;}
    .collapse input:checked ~ .collapse-header svg{transform: rotate(90deg);transition: all .3s;}
    .collapse-header span{font-size: 14px;line-height: 50px;padding-left: 40px;}
    .collapse-content{height: 0px;overflow: hidden;text-align: center;font-size: 14px;background: #fff;transition: all 0.2s ease, border 0s ease;}
    .collapse input:checked ~ .collapse-content{height: auto;padding: 20px 0;border-top: 1px solid #d9d9d9;transition:all 0.2s ease, border 0s ease;}
</style>
<div class="collapse">
    <div class="ollapse-item">
        <input type="radio" name="collapse">
        <div class="collapse-header">
            <svg viewBox="64 64 896 896">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
            </svg>
            <span>header 1</span>
        </div>
        <div class="collapse-content">
            <div>This is content 1</div>
        </div>
    </div>
    <div class="ollapse-item">
        <input type="radio" name="collapse">
        <div class="collapse-header">
            <svg viewBox="64 64 896 896">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
            </svg>
            <span>header 2</span>
        </div>
        <div class="collapse-content">
            <div>This is content 2</div>
        </div>
    </div>
    <div class="ollapse-item">
        <input type="radio" name="collapse">
        <div class="collapse-header">
            <svg viewBox="64 64 896 896">
                <path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path>
            </svg>
            <span>header 3</span>
        </div>
        <div class="collapse-content">
            <div>This is content 3</div>            
        </div>
    </div>
</div>

實現效果

單選卡片

<style type="text/css">
    .list-item{width: 500px;margin-left: 100px;display: flex;flex-flow: wrap;}
    .card-head{width: 20%;position: relative;margin-top: 10px;}
    .card-head input[type="radio"]{position: absolute;left: 0;top:0;width: 100%;height: 100%;margin:0;opacity: 0;}
    .card-head div{width: 90px;height: 90px;margin: auto;background: #ccc;font-size: 50px;line-height: 90px;text-align: center;border: 1px solid;}
    .card-head input:checked ~ div{background:#fff5f5;border-color: red; }
    .card-head input:checked ~ div:before{content: "+"}
</style>
<div class="list-item">
    <div class="card-head"><input type="radio" checked name="ListItem"><div>1</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>2</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>3</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>4</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>5</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>6</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>7</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>8</div></div>
    <div class="card-head"><input type="radio" name="ListItem"><div>9</div></div>    
</div>

實現效果

以上就是整理出來的checked幾種用法
但是有個問題 就是單選checked狀態可以用css獲取 但是我沒找到css可以取消checked狀態。有知道的大神希望留言