Show/Hide UL child if checked - javascript

I'm trying to show/hide some ul checkboxes when the parent is clicked. I've searched everywhere and I just can't get it to work!
Could someone please help me to get this to work? If a parent category is checked, sub checkboxes needs to show/hide.
This is the code:
<div id="refine-categories">
<h4>Categories</h4>
<ul class="parent cf">
<li id='project_category-3' class="popular-category"><label class="selectit"><input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" /> Aanbouw & Opbouw</label><ul class='children'>
<li id='project_category-33'><label class="selectit"><input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" /> aanbouw</label></li>
<li id='project_category-34'><label class="selectit"><input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" /> algemeen</label></li>
<li id='project_category-35'><label class="selectit"><input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" /> Fundering en heiwerken</label></li>
<li id='project_category-36'><label class="selectit"><input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" /> garage bouwen</label></li>
<li id='project_category-37'><label class="selectit"><input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" /> isoleren</label></li>
<li id='project_category-38'><label class="selectit"><input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" /> nieuwbouw</label></li>
<li id='project_category-39'><label class="selectit"><input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" /> opbouw</label></li>
<li id='project_category-40'><label class="selectit"><input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" /> renovatie</label></li>
<li id='project_category-41'><label class="selectit"><input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" /> veranda en serre</label></li>
</li>
</ul> </div>
When I click on a parent checkbox I can see the span class is changed to <span class="custom checkbox checked"></span>
Hope someone can help me to sort this out!
Thank you for your time!
PS: You can check the website here: http://bit.ly/20Miaom It's in the sidebar (right).


set the .children to display:none;.
then from .parent, find the first checkbox. add a change event then toggle .children if it is checked.
to be more generic for all lists, use this, go back up the the .parent and find the .children to toggle.
$('.parent input[type="checkbox"]:first-child').change(function(){
$(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});
$('.parent input[type="checkbox"]:first-child').change(function() {
$(this).closest('.parent').find('.children').toggle($(this).is(':checked'));
});
.children {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="refine-categories">
<h4>Categories</h4>
<ul class="parent cf">
<li id='project_category-3' class="popular-category">
<label class="selectit">
<input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw & Opbouw</label>
<ul class='children'>
<li id='project_category-33'>
<label class="selectit">
<input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
</li>
<li id='project_category-34'>
<label class="selectit">
<input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
</li>
<li id='project_category-35'>
<label class="selectit">
<input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
</li>
<li id='project_category-36'>
<label class="selectit">
<input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
</li>
<li id='project_category-37'>
<label class="selectit">
<input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
</li>
<li id='project_category-38'>
<label class="selectit">
<input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
</li>
<li id='project_category-39'>
<label class="selectit">
<input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
</li>
<li id='project_category-40'>
<label class="selectit">
<input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
</li>
<li id='project_category-41'>
<label class="selectit">
<input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
</li>
</li>
</ul>
</div>
<div id="refine-categories">
<h4>Categories 2</h4>
<ul class="parent cf">
<li id='project_category-3' class="popular-category">
<label class="selectit">
<input value="3" type="checkbox" name="cat_project_category[]" id="in-project_category-3" />Aanbouw & Opbouw</label>
<ul class='children'>
<li id='project_category-33'>
<label class="selectit">
<input value="33" type="checkbox" name="cat_project_category[]" id="in-project_category-33" />aanbouw</label>
</li>
<li id='project_category-34'>
<label class="selectit">
<input value="34" type="checkbox" name="cat_project_category[]" id="in-project_category-34" />algemeen</label>
</li>
<li id='project_category-35'>
<label class="selectit">
<input value="35" type="checkbox" name="cat_project_category[]" id="in-project_category-35" />Fundering en heiwerken</label>
</li>
<li id='project_category-36'>
<label class="selectit">
<input value="36" type="checkbox" name="cat_project_category[]" id="in-project_category-36" />garage bouwen</label>
</li>
<li id='project_category-37'>
<label class="selectit">
<input value="37" type="checkbox" name="cat_project_category[]" id="in-project_category-37" />isoleren</label>
</li>
<li id='project_category-38'>
<label class="selectit">
<input value="38" type="checkbox" name="cat_project_category[]" id="in-project_category-38" />nieuwbouw</label>
</li>
<li id='project_category-39'>
<label class="selectit">
<input value="39" type="checkbox" name="cat_project_category[]" id="in-project_category-39" />opbouw</label>
</li>
<li id='project_category-40'>
<label class="selectit">
<input value="40" type="checkbox" name="cat_project_category[]" id="in-project_category-40" />renovatie</label>
</li>
<li id='project_category-41'>
<label class="selectit">
<input value="41" type="checkbox" name="cat_project_category[]" id="in-project_category-41" />veranda en serre</label>
</li>
</li>
</ul>
</div>


You will need to use some JQuery for this.
$('#in-project_category-3').click(function () {
$(".children").toggle(this.checked);
});
while your child ul needs to get display: none
I made you a fiddle, i hope this is what you wanted:
https://jsfiddle.net/jfuhdq0g/2/

Related

Javascript enable html when input checkbox checked

What should be the condition for: If i click the check box then the items for that particular brand is triggered?
Here I want to print the values for the item selected
The current code is showing Cannot read properties of null (reading 'addEventListener')
let filterBrand = document.getElementById("filter-brands");
filterBrand.addEventListener("change", function() {
if (filterBrand.value == "Amana") {
document.querySelector(".item-list").innerHTML = "";
for (let i = 0; i < productData.length; i++) {
console.log("hello");
}
}
});
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>

You can retrieve all checked checkboxes within ul#filter-brands using the css-selector #filter-brands input[type='checkbox']:checked. For example:
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`)) {
console.clear();
const selected = [];
// all checked checkboxes
document.querySelectorAll(`#filter-brands input[type='checkbox']:checked`)
.forEach( cb => /* here you can insert code to display stuff */
selected.push(cb.id) );
console.log(`Selected: ${selected.length ? selected.join(`, `) : `NONE`}`);
}
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
A more specific approach (handler per checkbox):
document.addEventListener(`click`, handle);
function handle(evt) {
if (evt.target.closest(`#filter-brands`) && evt.target.type === `checkbox`) {
const selected = evt.target.checked;
return document.querySelector(`[data-selector='${evt.target.id}']`)
.classList[evt.target.checked ? `add` : `remove`](`selected`);
}
}
ul {
display: inline-block;
max-width: 50vw;
}
ul#filter-brands {
float: left;
}
#brand-lists li {
display: none;
}
#brand-lists li.selected {
display: revert;
}
<h5>Filter By Brand</h5>
<ul id="filter-brands">
<li>
<input type="checkbox" id="Amana" value="Amana" />
<label for="Amana">Amana</label>
</li>
<li>
<input type="checkbox" id="Frigidaire" value="Frigidaire" />
<label for="Frigidaire">Frigidaire</label>
</li>
<li>
<input type="checkbox" id="GE" value="GE" />
<label for="GE">GE</label>
</li>
<li>
<input type="checkbox" id="Insignia" value="Insignia" />
<label for="Insignia">Insignia</label>
</li>
<li>
<input type="checkbox" id="LG" value="LG" />
<label for="LG">LG</label>
</li>
<li>
<input type="checkbox" id="Samsung" value="Samsung" />
<label for="Samsung">Samsung</label>
</li>
<li>
<input type="checkbox" id="Whirlpool" value="Whirlpool" />
<label for="Whirlpool">Whirlpool</label>
</li>
</ul>
<ul id="brand-lists">
<li data-selector="Amana">Amana list</li>
<li data-selector="Frigidaire">Frigidaire list</li>
<li data-selector="GE">GE list</li>
<li data-selector="Insignia">Insignia list
<li data-selector="LG">LG list</li>
<li data-selector="Samsung">Samsung list</li>
<li data-selector="Whirlpool">Whirlpool list</li>
</ul>

How can i auto select children option when selected parent option Js, Jquery

I have structor like
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>
What i need is i want choose level-0, it's will auto choose all lv-1 after it (child selection) and stop in lv-0 next.
How can i do it with JS or Jquery

I believe this is what you want. When a level-0 checkbox changes you want each of the following level-1 to change the same as the one you changed.
You traverse to the parent <li> and use nextUntil() to get the following group. Then change checked property of each of those checkboxes
$('.level-0 :checkbox').change(function(){
// from parent <li> get all siblings until next level-0
const $level_1 = $(this).closest('li.level-0').nextUntil('.level-0');
// set checked in them based on checked state of current one
$level_1.find(':checkbox').prop('checked', this.checked);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

jQuery's nextUntil might be able to help a bit with this:
$(function() {
$('.level-0').change(function () {
var status = $('input[type="checkbox"]', this).is(':checked');
var nextChks = $(this).nextUntil('.level-0');
if (nextChks && nextChks.length > 0) {
for (var i = 0; i < nextChks.length; i++) {
$('input[type="checkbox"]', nextChks[i]).attr('checked', status).prop('checked', status);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
Du Lịch
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
Ẩm Thực
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
Ẩm Thực Đường Phố
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
Món Ngon
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
Videos Giải Trí
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
Làm Đẹp</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
Nail
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
Trang Điểm
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
Làm Tóc
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
Tattoo
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

you can do that
with a bonus on checked/unchecked level-1 action to resume level-0
const
allCats = document.querySelector('#choose-categories')
, LevCats = [...allCats.querySelectorAll('li')]
;
allCats.onclick = ({target}) =>
{
if (!target.matches('input[type=checkbox]')) return
let liParent = target.closest('li')
, liRef = LevCats.findIndex(x=>x===liParent)
;
if (liParent.classList.contains('level-0'))
{
for (let i = ++liRef; i < LevCats.length; ++i)
if (LevCats[i].classList.contains('level-1') )
LevCats[i].querySelector('input[type=checkbox]').checked = target.checked
else
break
}
else // if (liParent.classList.contains('level-1')) *** BONUS ***
{
while ( !LevCats[--liRef].classList.contains('level-0') ) {}
if (target.checked)
LevCats[liRef].querySelector('input[type=checkbox]').checked = true
else
{
checkedCount = 0
for (let i = ++liRef; i < LevCats.length; ++i)
if (LevCats[i].classList.contains('level-1') )
{ if (LevCats[i].querySelector('input[type=checkbox]').checked ) checkedCount++ }
else
break;
if (checkedCount === 0) LevCats[--liRef].querySelector('input[type=checkbox]').checked = false
}
}
}
li.level-1 span::before { content : '\2015\2015'; color:lightgrey; }
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="1">
<span>Du Lịch</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="3">
<span>Ẩm Thực</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="86">
<span>Ẩm Thực Đường Phố</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="87">
<span>Món Ngon</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="9">
<span>Videos Giải Trí</span>
</label>
</li>
<li class="level-0">
<label>
<input type="checkbox" name="selectItemallow[]" value="81">
<span>Làm Đẹp</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="82">
<span>Nail</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="83">
<span>Trang Điểm</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="84">
<span>Làm Tóc</span>
</label>
</li>
<li class="level-1">
<label>
<input type="checkbox" name="selectItemallow[]" value="85">
<span>Tattoo</span>
</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

If you can/are allowed to change the html, you can make it to look like a tree, like the snippet below.. and what I did was
to add classes to each parent who has childrens and to each children itself (for the first group first-main-checkbox and first-sub-checkbox and for the second one with the second key word in class name)
get all elements with document.querySelectorAll(".first-sub-checkbox"); which return a NodeList (see querySelectorAll )
create a function who iterate through all elements returned by querySelectorAll and set the check state to true or false using a ternary operator
apply the function at click, which select/deselect checkbox: addEventListener("click", function) (see addEventListener)
I'm not saying that it's the best solution, but it's a start..
var firstMain = document.querySelector(".first-main-checkbox");
var firstChildrens = document.querySelectorAll(".first-sub-checkbox");
var secondMain = document.querySelector(".second-main-checkbox");
var secondChildrens = document.querySelectorAll(".second-sub-checkbox");
function toggleCheck(childrens) {
childrens.forEach(child => {
child.checked = child.checked == true ? false : true
})
}
firstMain.addEventListener("click", function() {
toggleCheck(firstChildrens)
});
secondMain.addEventListener("click", function() {
toggleCheck(secondChildrens)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="choose-categories" class="ms-drop bottom" style="display: block;">
<ul style="max-height: 250px;">
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="1">Du Lịch</label>
</li>
<li class="level-0">
<label><input class="first-main-checkbox" type="checkbox" name="selectItemallow[]" value="3">Ẩm Thực</label>
<ul>
<li class="level-1">
<label><input class="first-sub-checkbox" type="checkbox" name="selectItemallow[]" value="86">Ẩm Thực Đường Phố</label>
</li>
<li class="level-1">
<label><input class="first-sub-checkbox" type="checkbox" name="selectItemallow[]" value="87">Món Ngon</label>
</li>
</ul>
</li>
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="9">Videos Giải Trí</label>
</li>
<li class="level-0">
<label><input class="second-main-checkbox" type="checkbox" name="selectItemallow[]" value="81">Làm Đẹp</label>
</li>
<ul>
<li class="level-1">
<label><input class="second-sub-checkbox"type="checkbox" name="selectItemallow[]" value="82"> Nail</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="83">Trang Điểm</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="84">Làm Tóc</label>
</li>
<li class="level-1">
<label><input class="second-sub-checkbox" type="checkbox" name="selectItemallow[]" value="85">Tattoo</label>
</li>
</ul>
<li class="level-0">
<label><input type="checkbox" name="selectItemallow[]" value="1">another lv 0 item</label>
</li>
<li class="ms-no-results" style="display: none;">
No matches found
</li>
</ul>
</div>

I am not sure but gonna try.
You have element inside of event parameter so get li from it by calling parent('li')
then find all siblings that are after it by calling next('li') and do loop like this
const nexts = [];
par.next('li').foreach(function (elem) {
if (elem.hasClass('level-0') && nexts.length > 0)
return false; // break loop
if (elem.hasClass('level-1'))
nexts.push(elem); // add li element
});
then just go through nexts and for each find its input which you marked as checked. That's it.

How to toggle hide and show child elements in tree layout?

Here is my html code which requires some update like span or something which can let it hide all child elements to display children on click only for individual parent.
how can I add toggle span and javascript to make it show on click only specific child of each parent not all of them at once.
i am too beginner with javascript so no idea how can this be done please help me out how can i resolve this issue it will save my life. Thanks a lot
<div class=" col-lg-4 col-md-9 col-sm-8" id="Permission">
<ul id="Div1" class="tree">
<li class="has">
<input type="checkbox" name="Dashboard" value="yes"> Dashboard
<ul> </ul>
</li>
</ul>
<ul id="Div2" class="tree">
<li class="has" "="">
<input type="checkbox" name="Master" value="yes"> Master
<ul>
<li>
<input type="checkbox" id="Upper1 name=" menus-accesscontrol[9]"="" value="9"> AccessControl
<ul id="Parent1">
<li>
<input type="checkbox" name="Menus-User[3]" value="3"> User
<ul class="childs">
<li><input type="checkbox" name="UserAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="UserAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="UserAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Menu[6]" value="6"> Menu
<ul class="childs">
<li><input type="checkbox" name="MenuAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MenuAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MenuAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MenuAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-Group[23]" value="23"> Group
<ul class="childs">
<li><input type="checkbox" name="GroupAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="GroupAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="GroupAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="GroupAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerMaster[2]" value="2"> CustomerMaster
<ul class="childs">
<li><input type="checkbox" name="CustomerMasterAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerMasterAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerMasterAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerMasterAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<ul id="Div3" class="tree">
<li class="has" "="">
<input type="checkbox" name="Inventory" value="yes"> Inventory
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-UserRecharge[8]" value="8"> UserRecharge
<ul class="childs">
<li><input type="checkbox" name="UserRechargeAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="UserRechargeAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="UserRechargeAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="UserRechargeAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-SupplierInventory[43]" value="43"> SupplierInventory
<ul class="childs">
<li><input type="checkbox" name="SupplierInventoryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierInventoryAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="SupplierInventoryAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="SupplierInventoryAllowView" value="0"> Allow View</li>
</ul>
<li>
<input type="checkbox" id="Upper2 name=" menus-report[30]"="" value="30"> Report
<ul id="Parent2">
<li>
<input type="checkbox" name="Menus-CustomerException[31]" value="31"> CustomerException
<ul class="childs">
<li><input type="checkbox" name="CustomerExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="CustomerExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="CustomerExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SuplierException[33]" value="33"> SuplierException
<ul class="childs">
<li><input type="checkbox" name="SuplierExceptionAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SuplierExceptionAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SuplierExceptionAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SuplierExceptionAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SupplierReport[34]" value="34"> SupplierReport
<ul class="childs">
<li><input type="checkbox" name="SupplierReportAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SupplierReportAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SupplierReportAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SupplierReportAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-SenderSupplierSummary[35]" value="35"> SenderSupplierSummary
<ul class="childs">
<li><input type="checkbox" name="SenderSupplierSummaryAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="SenderSupplierSummaryAllowView" value="0"> Allow View </li>
</ul>
</li>
<li>
<input type="checkbox" name="Menus-MonthlySale[39]" value="39"> MonthlySale
<ul class="childs">
<li><input type="checkbox" name="MonthlySaleAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="MonthlySaleAllowDelete" value="0"> Allow Delete </li>
<li><input type="checkbox" name="MonthlySaleAllowEdit" value="0"> Allow Edit </li>
<li><input type="checkbox" name="MonthlySaleAllowView" value="0"> Allow View </li>
</ul>
</li>
</ul>
</li>
</li> </li> </li> </li> </li> </li> </li> </li> </li> </li>
</ul>
</li>
</ul>
<ul id="Div4" class="tree">
<li class="has" "="">
<input type="checkbox" name="Invoice" value="yes"> Invoice
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-CustomerInvoice[44]" value="44"> CustomerInvoice
<ul class="childs">
<li><input type="checkbox" name="CustomerInvoiceAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="CustomerInvoiceAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="CustomerInvoiceAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="CustomerInvoiceAllowView" value="0"> Allow View</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="Div5" class="tree">
<li class="has" "="">
<input type="checkbox" name="Contract Management" value="yes"> Contract Management
<ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Configuration[45]" value="45"> Configuration
<ul class="childs">
<li><input type="checkbox" name="ConfigurationAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ConfigurationAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ConfigurationAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ConfigurationAllowView" value="0"> Allow View</li>
</ul>
<li class="has parentCheckBox">
<input type="checkbox" name="Menus-Contract[47]" value="47"> Contract
<ul class="childs">
<li><input type="checkbox" name="ContractAllowCreate" value="0"> Allow Create</li>
<li><input type="checkbox" name="ContractAllowDelete" value="0"> Allow Delete</li>
<li><input type="checkbox" name="ContractAllowEdit" value="0"> Allow Edit</li>
<li><input type="checkbox" name="ContractAllowView" value="0"> Allow View</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</div>

You can use the 'toggleClass' in jQuery though there are other ways base on your needs. But you can check this basic example so that you can have an idea.
$(".root").on("click", function(){
$(this).find("ul").toggleClass("hide-children");
})
Sample 1 Fiddle: https://jsfiddle.net/nq5ecbLu/1/
Sample 2 Fiddle: https://jsfiddle.net/mt10aeg7/

Java radiobutton if else

I am currently new to web development, how do you get the total value of the chosen radio buttons and store it in an array then the link or page would be different base on the total value. Is it possible in javascript? let's say that the total values of the selected buttons is 50 then it will go to page1 if not it will go to page2 and so on.
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<div class="wrap">
<h1 class="likert-header">Likert Scale survey</h1>
<form action="">
<label class="statement">Q1.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="25">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="25">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Strongly disagree</label>
</li>
</ul>
<label class="statement">Q2.</label>
<ul class='likert'>
<li>
<input type="radio" name="likert" value="25">
<label>Strongly agree</label>
</li>
<li>
<input type="radio" name="likert" value="25">
<label>Agree</label>
</li>
<li>
<input type="radio" name="likert" value="strong_agree">
<label>Neutral</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Disagree</label>
</li>
<li>
<input type="radio" name="likert" value="-25">
<label>Strongly disagree</label>
</li>
</ul>
<button class="clear">Clear</button>
<button class="submit">Submit</button>
</div>
</form>
</div>
</HTML>

How to get selected radio button value from visibile HTML area?

I have following HTML with two ULs.
Click
<ul class="plan none">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold">
</label> <strong>100 ₪</strong>
</li>
</ul>
<hr />
<ul class="plan">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two">
</label> <strong>100 ₪</strong>
</li>
</ul>
First UL is with display: none and have one radio button is selected by default and Second UL is without selected.
Now I want get selected radio button value from visible UL.
Here is my jQuery Code:
$("#detail_buttons").click(function () {
if ($(".plan input[type='radio']:checked").val() != undefined) {
alert($(".plan input[type='radio']:checked").val());
}
});
My JSFiddle: Sample
Any Idea?
Thanks.

Use this way:
$(".plan:visible").find("input:radio:checked").val();
Snippet
$("#detail_buttons").click(function () {
alert($(".plan:visible").find("input:radio:checked").val());
return false;
});
.none {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check Value
<ul class="plan none">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold" checked="checked">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold">
</label> <strong>100 ₪</strong>
</li>
</ul>
<hr />
<ul class="plan">
<li>
<p>One month</p>
<label for="2" class="label_radio">
<input type="radio" value="40" id="2" data-name="Be Bold" name="be_bold_two">
</label> <strong>40 ₪</strong>
</li>
<li>
<p>Three months</p>
<label for="3" class="label_radio">
<input type="radio" value="70" id="3" data-name="Be Bold" name="be_bold_two">
</label> <strong>70 ₪</strong>
</li>
<li>
<p>Six months</p>
<label for="4" class="label_radio">
<input type="radio" value="100" id="4" data-name="Be Bold" name="be_bold_two">
</label> <strong>100 ₪</strong>
</li>
</ul>

Categories

Resources