Last active
October 26, 2018 12:53
-
-
Save serjnazarov/19ef6e5f64903b271fe9 to your computer and use it in GitHub Desktop.
Just a simple JQuery-based checkbox tree with sweet manners :-) Tree is expandable, checkboxes have logical actions and may be indeterminate. This example uses Russian regions, but you can use anything. Fieldset MUST wrap every category with sub-categories. Form must has id="tree". Use Bootstrap for better results!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf8"> | |
<!-- <link rel="stylesheet" href="./bootstrap.min.css"> --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> | |
<script> | |
$(function() { | |
$('form#tree legend').on('click', function() { | |
if ($(this).text() == "+") {$(this).text("-");} | |
else {$(this).text("+");} | |
//console.log(this); | |
//console.log("click"); | |
var currthread = $(this).parent("fieldset"); | |
$(currthread).children("fieldset").toggleClass("closed"); | |
}); | |
$("input:checkbox").on('change', function() { | |
var currcheck = $(this).closest("fieldset").has("fieldset"); | |
//отмечаем или снимаем отметку с детей | |
if ($(this).prop("checked") == true){ | |
//console.log("true"); | |
$(currcheck).find("input:checkbox").prop({"checked":true, "indeterminate":false}); //почему-то надо снимать "indeterminate" | |
} else { | |
//console.log("false"); | |
$(currcheck).find("input:checkbox").prop({"checked":false, "indeterminate":false}); //почему-то надо снимать "indeterminate" | |
} | |
//все ПРЯМЫЕ предки чекбокса становятся indeterminate | |
var currdeterm = $(this).closest("fieldset"); | |
$(currdeterm).parentsUntil( $("form#tree"), "fieldset").each(function(){ | |
//console.log(this); | |
$(this).find("input:checkbox:first").prop({"indeterminate":true, "checked":false}); | |
}); | |
//теперь проверим всех родителей-fieldset'ов этого чекбокса до самого верха. Каждого родителя надо проверить на чекнутость детей | |
$(this).parentsUntil( $("form#tree"), "fieldset").has("fieldset").each(function(){ | |
var chkbx = $(this).find("input:checkbox").not(":first"); //выбираем всех чекбоксов-детей-внуков и т.д. | |
var chkd = $(this).find("input:checkbox:checked"); //выбираем чекнутые чекбоксы среди детей | |
//console.log("всего: " + chkbx.length + "," + "чекнутых: " + chkd.length); | |
if (chkd.length == chkbx.length) { //если кол-во чекнутых равно общему кол-ву чекбоксов, то чекаем и этот чекбокс | |
$(this).find("input:checkbox:first").prop({"indeterminate":false, "checked":true}); | |
} | |
}); | |
}); | |
}); | |
</script> | |
<style> | |
form#tree fieldset { | |
margin: 0 0 0 15px; | |
padding: 0; | |
/*border: solid 1px black;*/ | |
} | |
form#tree fieldset legend { | |
margin: -22px -10px -22px -10px; | |
width: auto; | |
font-size:14px; | |
border:0; | |
cursor:pointer; | |
} | |
form#tree fieldset.closed { | |
margin: 0 0 0 15px; | |
padding: 0; | |
/*border: solid 1px black;*/ | |
display:none; | |
} | |
div.checkbox { | |
margin: 3px; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="row"> | |
<div class="col-md-4 col-md-offset-1"> | |
<form id="tree" role="form"> | |
<!--<div class="form-group">--> | |
<fieldset name="1"><legend>+</legend> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox" name="russia">Россия</label> | |
</div> | |
<fieldset name="2" class="closed"><legend>+</legend> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">УРФО</label> | |
</div> | |
<fieldset name="3" class="closed"><legend>+</legend> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Челябинская область</label> | |
</div> | |
<fieldset name="4" class="closed"> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Миасс</label> | |
</div> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Златоуст</label> | |
</div> | |
</fieldset> | |
</fieldset> | |
<fieldset name="3" class="closed"><legend>+</legend> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Курганская область</label> | |
</div> | |
<fieldset name="4" class="closed"> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Курган</label> | |
</div> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Щучье</label> | |
</div> | |
</fieldset> | |
</fieldset> | |
</fieldset> | |
<fieldset name="22" class="closed"><legend>+</legend> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">ЦФО</label> | |
</div> | |
<fieldset name="23" class="closed"><legend>+</legend> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Москва и область</label> | |
</div> | |
<fieldset name="24" class="closed"> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Москва</label> | |
</div> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Зеленоград</label> | |
</div> | |
<div class="checkbox"> | |
<label class="control-label"><input type="checkbox">Зеленоград</label> | |
</div> | |
</fieldset> | |
</fieldset> | |
</fieldset> | |
</fieldset> | |
<!--</div>--> | |
</form> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
JQuery library is required.
every category of your tree.You can divide this code to .html, .css and .js files by yourself.
Don't forget to wrap in
Form must have id="tree", but you can change this in JS code.