如何创建具有不确定状态的自定义复选框

我正在尝试获取自定义复选框的不确定状态，但无法实现。我已经尝试过css但它现在正在工作。

以下是我试图实现的目标：

$(document).ready(function() {
var checkboxes = document.querySelectorAll('input.subOption'),
checkall = document.getElementById('option');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var checkedCount = document.querySelectorAll('input.subOption:checked').length;
checkall.checked = checkedCount > 0;
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}
checkall.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
}
// intermedieate class 
// $("input[type='checkbox'].subOption").change(function(){
//     var a = $("input[type='checkbox'].subOption");
//     if(a.length == a.filter(":checked").length){
//         alert('all checked');
//     }else{
//         alert('one checked');
//         $(this).parent().parent().parent().prev().find('span').addClass('intermediate');
//         $(this).parent().parent().parent().prev().find('input:checked');
//     }
// });
});

/* Customize the label (the container) */
.container-check {
position: relative;
padding-left: 25px;
margin-bottom: 11px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-weight: normal;
}
.container-list ul {
list-style: none;
margin-left: -14px;
}
/* Hide the browser's default checkbox */
.container-check input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #fff;
border: solid 1px #626579;
border-radius: 4px;
}
/* On mouse-over, add a grey background color */
.container-check:hover input~.checkmark {
background-color: #fff;
}
/* When the checkbox is checked, add a blue background */
.container-check input:checked~.checkmark {
background-color: #25a5bd;
border: solid 1px #25a5bd;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container-check input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container-check .checkmark:after {
left: 5px;
top: 2px;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* disabled checkmark */
.container-check.disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* Intermediate css */
.container-check .intermediate:after {
left: 5px;
top: 2px;
width: 0px;
height: 9px;
border: solid white;
border-width: 0px 0px 6px 3px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-list">
<ul>
<li>
<label class="container-check" for="option"><input id="option" type="checkbox"><span class="checkmark"></span>
Checkbox Selected</label>
<ul>
<li>
<label class="container-check">
<input class="subOption" type="checkbox">
<span class="checkmark"></span>
Checkbox label 01</label>
</li>
<li>
<label class="container-check">
<input class="subOption" type="checkbox">
<span class="checkmark"></span>
Checkbox label 02</label>
</li>
<li>
<label class="container-check">
<input class="subOption" type="checkbox"> 
<span class="checkmark"></span>
Checkbox label 03</label>
</li>
</ul>
</li>
</ul>
</div>

这是一个代码笔

这是一篇关于不确定复选框的文章

$('input[type="checkbox"]').change(function(e) {
var checked = $(this).prop("checked"),
container = $(this).parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});
function checkSiblings(el) {
var parent = el.parent().parent(),
all = true;

el.siblings().each(function() {
return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
});

if (all && checked) {
parent.children('input[type="checkbox"]').prop({
indeterminate: false,
checked: checked
});

checkSiblings(parent);
} else if (all && !checked) {
parent.children('input[type="checkbox"]').prop("checked", checked);
parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
checkSiblings(parent);
} else {
el.parents("li").children('input[type="checkbox"]').prop({
indeterminate: true,
checked: true
});
}
}
checkSiblings(container);
});

body {
padding: 20px;
}
ul {
list-style: none;
margin: 5px 20px;
}
li {
margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Indeterminate Checkboxes</h1>
<ul>
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1">Andre</label>
</li>
<li>
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2">Paul Bunyan</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3">Two sandwiches</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="short" id="short">
<label for="short">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2">Mushrooms</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">One Sandwich</label>
</li>
</ul>
</li>
</ul>

编辑

这是更新的佩德拉姆斯版本

$(document).ready(function() {
var checkboxes = document.querySelectorAll('input.subOption'),
checkall = document.getElementById('option');
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].onclick = function() {
var checkedCount = document.querySelectorAll('input.subOption:checked').length;
checkall.checked = checkedCount > 0;
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
}
}
checkall.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked;
}
}
});

.container-check input:indeterminate~.checkmark {
background: #25a5bd;
}
.container-check input:indeterminate~.checkmark:before {
content: ' ';
position: absolute;
top: 50%;
left: 10%;
transform: translate(0, -50%);
width: 80%;
height: 3px;
background: white;
}
/* Customize the label (the container) */
.container-check {
position: relative;
padding-left: 25px;
margin-bottom: 11px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-weight: normal;
}
.container-list ul {
list-style: none;
margin-left: -14px;
}
/* Hide the browser's default checkbox */
.container-check input {
position: absolute;
opacity: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 16px;
width: 16px;
background-color: #fff;
border: solid 1px #626579;
border-radius: 4px;
}
/* When the checkbox is checked, add a blue background */
.container-check input:checked~.checkmark {
background-color: #25a5bd;
border: solid 1px #25a5bd;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container-check input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container-check .checkmark:after {
left: 5px;
top: 2px;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* disabled checkmark */
.container-check.disabled {
cursor: not-allowed;
opacity: 0.5;
}
/* Intermediate css */
.container-check .intermediate:after {
left: 5px;
top: 2px;
width: 0px;
height: 9px;
border: solid white;
border-width: 0px 0px 6px 3px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-list">
<ul>
<li>
<label class="container-check" for="option"><input id="option" type="checkbox"><span class="checkmark"></span>
Checkbox Selected</label>
<ul>
<li>
<label class="container-check">
<input class="subOption" type="checkbox">
<span class="checkmark"></span>
Checkbox label 01</label>
</li>
<li>
<label class="container-check">
<input class="subOption" type="checkbox">
<span class="checkmark"></span>
Checkbox label 02</label>
</li>
<li>
<label class="container-check">
<input class="subOption" type="checkbox">
<span class="checkmark"></span>
Checkbox label 03</label>
</li>
</ul>
</li>
</ul>
</div>

：不确定

如果要为indeterminate状态设置自定义css，请使用:indeterminate

.container-check input:indeterminate ~ .checkmark {
background: red;
}

JSFiddle

相关内容

最新更新

热门标签：