カスタムチェックボックスに不確定状態を追加するにはどうすればよいですか？

私は自分のカスタムチェックボックスに不定状態を追加します。カスタムチェックボックスに不確定状態を追加するにはどうすればよいですか？

真
偽
[ - ] <-- I want to have [-] value for indeterminate state when user clicks it third time

ここでコード

/* The container */ 
 
.container { 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 35px; 
 
    margin-bottom: 12px; 
 
    cursor: pointer; 
 
    font-size: 22px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
/* Hide the browser's default checkbox */ 
 
.container input { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
/* Create a custom checkbox */ 
 
.checkmark { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 25px; 
 
    width: 25px; 
 
    background-color: #eee; 
 
} 
 

 
/* On mouse-over, add a grey background color */ 
 
.container:hover input ~ .checkmark { 
 
    background-color: #ccc; 
 
} 
 

 
/* When the checkbox is checked, add a blue background */ 
 
.container input:checked ~ .checkmark { 
 
    background-color: #2196F3; 
 
} 
 

 
/* Create the checkmark/indicator (hidden when not checked) */ 
 
.checkmark:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
/* Show the checkmark when checked */ 
 
.container input:checked ~ .checkmark:after { 
 
    display: block; 
 
} 
 

 
/* Style the checkmark/indicator */ 
 
.container .checkmark:after { 
 
    left: 9px; 
 
    top: 5px; 
 
    width: 5px; 
 
    height: 10px; 
 
    border: solid white; 
 
    border-width: 0 3px 3px 0; 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
}

<html> 
 
<body> 
 

 
<h1>Custom Checkbox</h1> 
 
<label class="container"> 
 
    <input type="checkbox" checked="checked"> 
 
    <span class="checkmark"></span> 
 
</label> 
 

 
</body> 
 
</html>

出典

2017-11-17 n33rma

通常は2つの状態しかないので、通常のチェックボックスを使わなくてはなりません。チェックボックスを模倣するのに3つの特徴的な状態を含むJavaScriptもあります。 –

私はあなたがCSSを使ってこれを達成できるとは思わない。 cssを使用して3番目のカウンタースタイルで無効状態を追加できます。 – Kushtrim

htmlのチェックボックスには2つの値しかありません。 3つ目を追加する場合は、番号のような別のタイプの入力を使用する必要があります。 Falseは0、Trueは1、Indeterminateは3とすることができます。 – ZeWebDev

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

$(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: 15px; height: 15px; border: 1px solid #333; margin: 3px;} 
 
.multi-checkbox .check.unchecked {background: #fff;} 
 
.multi-checkbox .check.partial {background: #ccc;} 
 
.multi-checkbox .check.checked {background: #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="multi-checkbox"> 
 
    <span class="check"></span> 
 
    Check me 
 
</div>

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

出典

2017-11-17 10:35:50 Soolie

これは、ありがとう、ありがとう。 – n33rma

カスタムチェックボックスに不確定状態を追加するにはどうすればよいですか？

答えて

関連する問題