WEB DİZAYN
BİRBİRİNDEN BAĞIMSIZ CHECKBOX
Birbirinden bağımsız checkboxlar oluşturdumuğumuz sitelerde oldukça kullanışlı. Başka program dillerinde de alternatifleri olmasına rağmen jquery sloganı gibi daha az kod ile bu işi yapmakta. Head kısmına aşağıdaki kodu ekleyiniz.
< link rel='stylesheet' href='css/style.css'>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">< /script>
< script>
$(function() {
$('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: false
});
}
}
checkSiblings(container);
});
});
< /script>
Body kısmına da aşağıdaki kodu yapıştırdığımızda geriye sadece kullanması kalıyor.
< div id="page-wrap">
< h1>Bağımsız Checkbox'lar< /h1>< br>
< ul>
< li>
< input type="checkbox" name="tall" id="tall">
< label for="tall">Kitaplar< /label>
< ul>
< li>
< input type="checkbox" name="tall-1" id="tall-1">
< label for="tall-1">Roman< /label>
< /li>
< li>
< input type="checkbox" name="tall-2" id="tall-2">
< label for="tall-2">Yazılım< /label>
< ul>
< li>
< input type="checkbox" name="tall-2-1" id="tall-2-1">
< label for="tall-2-1">C#< /label>
< /li>
< li>
< input type="checkbox" name="tall-2-2" id="tall-2-2">
< label for="tall-2-2">Android< /label>
< /li>
< /ul>
< /li>
< li>
< input type="checkbox" name="tall-3" id="tall-3">
< label for="tall-3">Web Dizayn< /label>
< /li>
< /ul>
< /li>
< li>
< input type="checkbox" name="short" id="short">
< label for="short">Makaleler< /label>
< ul>
< li>
< input type="checkbox" name="short-1" id="short-1">
< label for="short-1">Yazılım< /label>
< /li>
< li>
< input type="checkbox" name="short-2" id="short-2">
< label for="short-2">İnşaat< /label>
< /li>
< li>
< input type="checkbox" name="short-3" id="short-3">
< label for="short-3">İktisat< /label>
< /li>
< /ul>
< /li>
< /ul>
< /div>
