3つの状態のチェックボックス

Question

3つまたは4つの状態のチェックボックスを実装しようとしています。私が達成したいことについては下の図を参照してください。私はFAリンクが働いている。しかし、fa-linkを表示しない代わりにもう一度クリックすると、私はfa-chain-brokenで中間状態を表示したいと思います。

ここまでは私がこれまで持っていたものです。

input[type="checkbox"] { 
 
    -webkit-appearance: initial; 
 
    appearance: initial; 
 
    outline: 1px solid #A9A9A9; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #FFFFFF; 
 
    position: relative; 
 
} 
 

 
input[type="checkbox"]:checked { 
 
    background: #0073C0; 
 
} 
 

 
input[type="checkbox"]:checked:after { 
 
    font-family: 'FontAwesome'; 
 
    content: "\f0c1"; 
 
    color: #fff; 
 
    position: absolute; 
 
    font-size: 22px; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    /*outline: 1px solid #A9A9A9;*/ 
 
}

<input id="box1" type="checkbox" />

私はFA-リンクが素晴らしい働いています。私はファーチェーン壊れたために別の状態を追加するにはどうすればいいですか？ CSSがオプションでない場合、javascriptは完全にOKです。

Answer 1

通常のチェックボックスは実行できません。これにはフラグを使用する必要があります。私は何だろうと、その要素はに結ばれ、カウンタフラグを使用することです：

$(function() { 
 
    $(".check").data("state", 0).addClass("unchecked"); 
 
    $(".multi-checkbox").click(function() { 
 
    var states = ["unchecked", "partial", "checked"]; 
 
    var curState = $(this).find(".check").data("state"); 
 
    curState++; 
 
    $(this).find(".check").removeClass("unchecked partial checked").addClass(states[curState % states.length]).data("state", curState % states.length); 
 
    }); 
 
});

.multi-checkbox .check { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 1px solid #333; 
 
    margin: 3px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
} 
 

 
.multi-checkbox .check.unchecked i { 
 
    display: none; 
 
} 
 

 
.multi-checkbox .check.partial i.fa-link { 
 
    display: none; 
 
} 
 

 
.multi-checkbox .check.checked i.fa-chain-broken { 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="multi-checkbox"> 
 
    <span class="check"> 
 
    <i class="fa fa-chain-broken"></i> 
 
    <i class="fa fa-link"></i> 
 
    </span> Check me 
 
</div>

は、私はこの答えは、このスニペットを書きました。ご質問がある場合はお知らせください。素晴らしいフォントで、私たちはより良い方法でそれを行うことができます。