I am a beginner in JavaScript and I can't figure out that how can I get the index of li whose checkbox is checked and add/remove the CSS class cut to that particular li.
I tried parent methods but that was not working maybe I was not doing in a proper manner!
for instance, I intentionally added the CSS cut class to the last li but I want to add this class to li when the checkbox is checked.
function myfunction() {
}
.cut {
text-decoration: line-through;
opacity: 0.4;
}
#mylist {
list-style: none;
}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction()">
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction()">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck cut">
<input type="checkbox" class="status" checked onclick="myfunction()">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>
You can pass this keyword to the function so that you can identify the closest li element of the clicked checkbox:
function myfunction(el){
if(el.checked){
el.closest('li').classList.add('cut');
}
else{
el.closest('li').classList.remove('cut');
}
}
.cut{
text-decoration: line-through;
opacity: 0.4;
}
#mylist{list-style: none;}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)" >
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>
Attaching event using JavaScript:
var checkboxes = document.querySelectorAll('.mycheck .status');
checkboxes.forEach(function(chk){
chk.addEventListener('click', function(){
myfunction(this);
});
})
function myfunction(el){
if(el.checked){
el.closest('li').classList.add('cut');
}
else{
el.closest('li').classList.remove('cut');
}
}
.cut{
text-decoration: line-through;
opacity: 0.4;
}
#mylist{list-style: none;}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" >
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>
Related
I would like the background color to remain the same foreach <ul> as lightgray.
Currently when clicking the radio button, it will change the ul background wrongly. I dont know how to make the jquery script loop thru all the ul available, I would really appreciate it if the script can be small, as this concept will be applied to 100+ ul
$(document).ready(function() {
$("ul.options-list li").on("click",function() {
if($(this).find('input[type="radio"]').is(':checked')) {
$('ul.options-list li').removeClass('change_color');
$(this).addClass('change_color');
}
});
});
ul.options-list li.change_color{
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Q1
<ul class="options-list">
<li>
<input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
</li>
<li>
<input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
</li>
</ul>
</div>
<div>
Q2
<ul class="options-list">
<li>
<input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
</li>
<li>
<input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
</li>
</ul>
</div>
You can loop through your ul li using each loop then use $(this) to check if the radio is checked depending on this add or remove your class.
Demo Code :
$(document).ready(function() {
$("ul.options-list li").on("click", function() {
//loop through ul li
$("ul.options-list li").each(function() {
if ($(this).find('input[type="radio"]').is(':checked')) {
$(this).addClass('change_color');//add change_Color
} else {
$(this).removeClass('change_color');//remove same
}
})
});
});
ul.options-list li.change_color {
background-color: lightgray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Q1
<ul class="options-list">
<li>
<input type="radio" name="r1" id="1" value="1" data-toggle="radio">O1
</li>
<li>
<input type="radio" name="r1" id="2" value="2" data-toggle="radio">O2
</li>
</ul>
</div>
<div>
Q2
<ul class="options-list">
<li>
<input type="radio" name="r2" id="3" value="3" data-toggle="radio">A1
</li>
<li>
<input type="radio" name="r2" id="4" value="4" data-toggle="radio">A2
</li>
</ul>
</div>
I am not great with javascript.
but maybe give all your radio buttons the same class and add something like this
document.getElementByClass("myCheck").checked = true;
and then addClass('change_color') to those selected.
https://www.w3schools.com/jsref/prop_checkbox_checked.asp
I am trying to create tree view of multiple checkbox as tree everything working fine I just not being able to achieve goal to when child checkbox been check let its parent checkbox also checked. I find example from
http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html
<div class="form-group form-show-validation row">
<label for="name" class="col-lg-3 col-md-3 col-sm-4 mt-sm-2 text-right">Permissions <span class="required-label">*</span></label>
<div class="acidjs-css3-treeview col-lg-4 col-md-9 col-sm-8">
<ul>
<li>
<input type="checkbox" id="node-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0">Libraries</label>
<ul>
<li>
<input type="checkbox" id="node-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0">Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0">My Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-0">Downloads</label>
</li>
<li>
<input type="checkbox" id="node-0-0-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-1">Projects</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1">Music</label>
<ul>
<li>
<input type="checkbox" id="node-0-1-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-0">My Music</label>
</li>
<li>
<input type="checkbox" id="node-0-1-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-1">Public Music</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-2" /><label><input type="checkbox" /><span></span></label><label for="node-0-2">Pictures</label>
<ul>
<li>
<input type="checkbox" id="node-0-2-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-0">My Pictures</label>
</li>
<li>
<input type="checkbox" id="node-0-2-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-1">Public Pictures</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-3" checked="checked" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3">Video</label>
<ul>
<li>
<input type="checkbox" id="node-0-3-0" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-0">My Videos</label>
</li>
<li>
<input type="checkbox" id="node-0-3-1" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-1">Public Videos</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
Here is javascript code which will be required
<script>
$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
var
checkbox = $(this),
nestedList = checkbox.parent().next().next(),
nestedListp = checkbox.parent().prev().prev(),
selectNestedListCheckbox = nestedList.find("label:not([for]) input:checkbox");
selectNestedListCheckboxp = nestedListp.find("label:not([for]) input:checkbox");
if(checkbox.is(":checked")) {
return selectNestedListCheckbox.prop("checked", true);
return selectNestedListCheckboxp.prop("checked", true);
}
selectNestedListCheckbox.prop("checked", false);
});
</script>
Here is working demo by Fabien
$(function() {
$('input[type="checkbox"]').change(checkboxChanged);
function checkboxChanged() {
var $this = $(this),
checked = $this.prop("checked"),
container = $this.parent(),
siblings = container.siblings();
container.find('input[type="checkbox"]')
.prop({
indeterminate: false,
checked: checked
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(container, checked);
}
function checkSiblings($el, checked) {
var parent = $el.parent().parent(),
all = true,
indeterminate = false;
$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
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(checked ? 'custom-checked' : 'custom-unchecked');
checkSiblings(parent, checked);
}
else if (all && !checked) {
indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;
parent.children('input[type="checkbox"]')
.prop("checked", checked)
.prop("indeterminate", indeterminate)
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
checkSiblings(parent, checked);
}
else {
$el.parents("li").children('input[type="checkbox"]')
.prop({
indeterminate: true,
checked: false
})
.siblings('label')
.removeClass('custom-checked custom-unchecked custom-indeterminate')
.addClass('custom-indeterminate');
}
}
});
* { margin: 0; padding: 0; }
#page-wrap {
margin: auto 0;
}
.treeview {
margin: 10px 0 0 20px;
}
ul {
list-style: none;
}
.treeview li {
background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat;
padding: 2px 0 2px 16px;
}
.treeview > li:first-child > label {
/* style for the root element - IE8 supports :first-child
but not :last-child ..... */
}
.treeview li.last {
background-position: 0 -1766px;
}
.treeview li > input {
height: 16px;
width: 16px;
/* hide the inputs but keep them in the layout with events (use opacity) */
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}
.treeview li > label {
background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
/* move left to cover the original checkbox area */
margin-left: -20px;
/* pad the text to make room for image */
padding-left: 20px;
}
/* Unchecked styles */
.treeview .custom-unchecked {
background-position: 0 -1px;
}
.treeview .custom-unchecked:hover {
background-position: 0 -21px;
}
/* Checked styles */
.treeview .custom-checked {
background-position: 0 -81px;
}
.treeview .custom-checked:hover {
background-position: 0 -101px;
}
/* Indeterminate styles */
.treeview .custom-indeterminate {
background-position: 0 -141px;
}
.treeview .custom-indeterminate:hover {
background-position: 0 -121px;
}
<div id="page-wrap">
<h2>Treeview with Custom Checkboxes and Indeterminate State</h2>
<ul class="treeview">
<li>
<input type="checkbox" name="tall" id="tall">
<label for="tall" class="custom-unchecked">Tall Things</label>
<ul>
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1" class="custom-unchecked">Buildings</label>
</li>
<li>
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2" class="custom-unchecked">Giants</label>
<ul>
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1" class="custom-unchecked">Andre</label>
</li>
<li class="last">
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2" class="custom-unchecked">Paul Bunyan</label>
</li>
</ul>
</li>
<li class="last">
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3" class="custom-unchecked">Two sandwiches</label>
</li>
</ul>
</li>
<li class="last">
<input type="checkbox" name="short" id="short">
<label for="short" class="custom-unchecked">Short Things</label>
<ul>
<li>
<input type="checkbox" name="short-1" id="short-1">
<label for="short-1" class="custom-unchecked">Smurfs</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2">
<label for="short-2" class="custom-unchecked">Mushrooms</label>
</li>
<li class="last">
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3" class="custom-unchecked">One Sandwich</label>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="main.js"></script>
Since my first answer below, I have developed a Hybrid HTML Dropdown plugin to solve the general case problem of checked lists and nested lists as well as the option to create thumbnail based check lists fields. So the above problem can now be solved with the following html/js,
function docReady(fn) {
if (document.readyState!='loading'){
fn();
}else if (document.addEventListener){
document.addEventListener('DOMContentLoaded', fn);
}
}
docReady( (e)=>{
let sel= document.querySelector('#nested-list');
let hyd = new HybridDropdown(sel,{});
});
<link href="https://aurovrata.github.io/hybrid-html-dropdown/assets/css/hybrid-dropdown.css" rel="stylesheet"/>
<script src="https://aurovrata.github.io/hybrid-html-dropdown/assets/js/hybrid-dropdown.js"></script>
<div id="nested-list" data-tree-view="true" data-color="#ff26ffc9"
data-background-color="#454d4f">
<script type="application/json">
{
"":"Select a dish",
"Japan":{
"sushi":{
"label":"Sushi",
"ps":"Pumpkin sushi",
"as":"Avocado sushi",
"tc":"Tomato sushi",
"cs":"Carrot sushi"
}
},
"India":{
"dosa":{
"label":"Dosa",
"pd":"Plain dosa",
"md":"Masala dosa",
"myd":"Mysore dosa",
"pr":"Paper roast"
}
}
}
</script>
</div>
I want to add an own class if a list item has an active radio button inside of it.
I tried this code to add a class but I guess there is an error in it:
$('input').change(function() {
var check = $('.wc_payment_method').map(function(e) {
return $(this).find('input[type="radio"]').is(':checked')
}).get()
$('.wc_payment_method').addClass('active');
})
.wc_payment_method {padding: 10rem;}
.active {background-color: #eee;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_creditcard">
<input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
<label for="payment_method_creditcard">Credit card</label>
</li>
</ul>
Loop your inputs using .each()
go for $(this).closest('selector') to target the closest selector
use .toggleClass('className', Boolean) to toggle the class.
const $inp = $('[name="payment_method"]');
$inp.on("change", function() {
$inp.each(function() {
$(this).closest('.wc_payment_method').toggleClass('active', this.checked);
});
});
.active { background: gold; }
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_creditcard">
<input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
<label for="payment_method_creditcard">Credit card</label>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
or don't use JavaScript at all:
Use the :checked pseudo
Target the sibling Label element General Sibling Combinator selector ~
/* Style the adjacent LABEL instead */
.input-radio:checked ~ label {
background: gold;
}
<ul>
<li class="wc_payment_method payment_method_paypal">
<input id="payment_method_paypal" type="radio" class="input-radio" name="payment_method" value="paypal">
<label for="payment_method_paypal">PayPal</label>
</li>
<li class="wc_payment_method payment_method_creditcard">
<input id="payment_method_creditcard" type="radio" class="input-radio" name="payment_method" value="creditcard">
<label for="payment_method_creditcard">Credit card</label>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Looking to have it so that when the first checkbox is selected (geographic_checkbox), a further 2 checkboxes are displayed (regions,cities &towns_checkbox and ringfencing_checkbox), but for some reason my code is not working.
$('#geographic_checkbox').on('click', function() {
if (this.checked) {
$('#geographic_suboptions').removeClass('hidden');
} else {
$('#geographic_suboptions').addClass('hidden');
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="targeting">
<h1>Targeting</h1>
<ul>
<li>
<input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox" onclick="GeographicFunction()">Geographic<br>
<p id="geographic_text" style="display:none">+£0.08 CPC</p>
<div id="geographic_suboptions" class="hidden">
<ul>
<li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox" onclick="RegionsFunction()">Regions, Cities & Towns<br></li>
<p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
<li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox" onclick="RingfencingFunction()">Ring-Fencing<br></li>
<p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
</ul>
</div>
</li>
</ul>
</div>
Actually for such a feature you not really need javascript since css provide the :checked selector:
.hidden {
display: none;
}
ul input:checked ~ #geographic_suboptions {
display: inline;
}
<div class="targeting">
<h1>Targeting</h1>
<ul>
<li>
<input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox">Geographic<br>
<p id="geographic_text" style="display:none">+£0.08 CPC</p>
<div id="geographic_suboptions" class="hidden">
<ul>
<li><input type="checkbox" name="regions,cities&towns" value="0.08" id="regions,cities&towns_checkbox">Regions, Cities & Towns<br></li>
<p id="regions,cities&towns_text" style="display:none">+£0.08 CPC</p>
<li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox">Ring-Fencing<br></li>
<p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
</ul>
</div>
</li>
</ul>
</div>
Hello i need to have a indeterminate check boxes, when i click on a checkbox, the check boxes under this one must be selected automatically.
I don't know what is the problem with this code, this property doesn't work.
I think the problem is with JS code.
<html>
<style>
body {
padding: 20px;
}
ul {
list-style: none;
margin: 5px 20px;
}
li {
margin: 10px 0;
}
</style>
<script language="Javascript">
$('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>
<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>
</body>
</html>
Working fine. Just add Jquery dependency.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Expression like $(???) in your code, meaning jQuery selector.
In this case, you use element selector. https://api.jquery.com/element-selector/
<!DOCTYPE html>
<html>
<style>
body {
padding: 20px;
}
ul {
list-style: none;
margin: 5px 20px;
}
li {
margin: 10px 0;
}
</style>
<!-- ***** ADDED Start ***** -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- ***** ADDED End ***** -->
<script language="Javascript">
$('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>
<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>
</body>
</html>