I managed to do on checking Parent Checkbox to check all Child Checkboxes but i dont know how to do on checking any child checkbox to check the parent checkbox and if all the child checkboxes are unchecked then the Parent checkbox needs to be unchecked.
1. I did on checking Parent Checkbox to check all Child Checkboxes (completed)
2. on checking any child checkbox also checks parent checkbox (not complete)
3. if all the child checkboxes are unchecked then the Parent checkbox unchecks(not complete).
This is how far i got:
$(function () {
$("input[type='checkbox']").change(function () {
$(this).siblings('ul')
.find("input[type='checkbox']")
.prop('checked', this.checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li style="display: block;"><input type="checkbox">Lead1 <br>
<ul>
<li style="display: block;"><input type="checkbox"> All Leads <br></li>
<li style="display: block;"><input type="checkbox"> Recent Leads <br></li>
<li style="display: block;"><input type="checkbox"> My Leads <br></li>
</ul>
</li>
<li style="display: block;"><input type="checkbox">Lead2 <br>
<ul>
<li style="display: block;"><input type="checkbox"> first <br></li>
<li style="display: block;"><input type="checkbox"> second <br></li>
<li style="display: block;"><input type="checkbox"> third <br></li>
</ul>
</li>
Please Help me to solve this as i am new to jquery and js.
You can have another handler which will check whether any checkbox in the same level is checked if so check the parent checkbox
$(function() {
$("li:has(li) > input[type='checkbox']").change(function() {
$(this).siblings('ul').find("input[type='checkbox']").prop('checked', this.checked);
});
$("input[type='checkbox'] ~ ul input[type='checkbox']").change(function() {
$(this).closest("li:has(li)").children("input[type='checkbox']").prop('checked', $(this).closest('ul').find("input[type='checkbox']").is(':checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li style="display: block;">
<input type="checkbox">Lead1
<br>
<ul>
<li style="display: block;">
<input type="checkbox">All Leads
<br>
</li>
<li style="display: block;">
<input type="checkbox">Recent Leads
<br>
</li>
<li style="display: block;">
<input type="checkbox">My Leads
<br>
</li>
</ul>
</li>
<li style="display: block;">
<input type="checkbox">Lead2
<br>
<ul>
<li style="display: block;">
<input type="checkbox">first
<br>
</li>
<li style="display: block;">
<input type="checkbox">second
<br>
</li>
<li style="display: block;">
<input type="checkbox">third
<br>
</li>
</ul>
</li>
</ul>
Add a class parent to the parent li and then do it like following.
$("input[type='checkbox']").change(function () {
var ul = $(this).closest('ul');
var checked = ul.find('input[type="checkbox"]:checked').length > 0;
$(this).closest('.parent').find('input[type="checkbox"]').first().prop('checked', checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent" style="display: block;">
<input type="checkbox">Lead1 <br>
<ul>
<li style="display: block;"><input type="checkbox"> All Leads <br></li>
<li style="display: block;"><input type="checkbox"> Recent Leads <br></li>
<li style="display: block;"><input type="checkbox"> My Leads <br></li>
</ul>
</li>
<li class="parent" style="display: block;">
<input type="checkbox">Lead2 <br>
<ul>
<li style="display: block;"><input type="checkbox"> first <br></li>
<li style="display: block;"><input type="checkbox"> second <br></li>
<li style="display: block;"><input type="checkbox"> third <br></li>
</ul>
</li>
Related
I am trying get first parent (Only) of selected element which have Input type Checkbox as first-level descendant.
HTML
$('input[type="checkbox"]').change(function(e) {
$(this)
.parent()
.parents("li:has(input[type='checkbox'])")
.find(">span")
.css("background-color", "yellow");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="UL1">
<li class="LI1">
<input class="checkbox1" type="checkbox" />
<span>LI1</span>
<ul class="UL2">
<li class="LI3">
<input class="checkbox2" type="checkbox" />
<span>LI3</span>
</li>
<li class="LI4">
<input class="checkbox3" type="checkbox" />
<span>LI4</span>
<ul class="UL3">
<li class="LI5">
<span>LI5</span>
</li>
<li class="LI6">
<span>LI6</span>
<ul class="UL4">
<li class="LI7">
<span>LI7</span>
</li>
<li class="LI8">
<input class="checkbox4" type="checkbox" />
<span>LI8</span>
</li>
<li class="LI9">
<span>LI9</span>
</li>
</ul>
</li>
<li class="LI10">
<span>LI10</span>
</li>
</ul>
</li>
<li class="LI11">
<span>LI11</span>
</li>
</ul>
</li>
<li class="LI12">
<input class="checkbox5" type="checkbox" />
<span>LI12</span>
</li>
</ul>
</div>
NOTE: In this code I am highlighting span only as an example, but my actual purpose of having parent with checkbox is different.
Here when selecting "LI8" checkbox, I need its parent that has Checkbox. according to this I should receive "LI4" but when I am using ".parents(). it is giving me all parents including "LI" not having Checkbox.
Does anybody know how can I get only first parent that has checkbox as first-level descendant? In my scenario on selection of "LI8", only "LI4" should return and "LI6" and "LI1" must ignore. Thank you.
li:has(input[type='checkbox']) will select all lis that contain an input at any level.
Use the direct descendant selector (>) here: .parents("li:has(>input[type='checkbox'])") to select those lis that have a child input.
You can then limit the selection to a single item using .first().
$('input[type="checkbox"]').change(function(e) {
$(this)
.parent()
.parents("li:has(>input[type='checkbox'])")
.first()
.find(">span")
.css("background-color", "yellow");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="UL1">
<li class="LI1">
<input class="checkbox1" type="checkbox" />
<span>LI1</span>
<ul class="UL2">
<li class="LI3">
<input class="checkbox2" type="checkbox" />
<span>LI3</span>
</li>
<li class="LI4">
<input class="checkbox3" type="checkbox" />
<span>LI4</span>
<ul class="UL3">
<li class="LI5">
<span>LI5</span>
</li>
<li class="LI6">
<span>LI6</span>
<ul class="UL4">
<li class="LI7">
<span>LI7</span>
</li>
<li class="LI8">
<input class="checkbox4" type="checkbox" />
<span>LI8</span>
</li>
<li class="LI9">
<span>LI9</span>
</li>
</ul>
</li>
<li class="LI10">
<span>LI10</span>
</li>
</ul>
</li>
<li class="LI11">
<span>LI11</span>
</li>
</ul>
</li>
<li class="LI12">
<input class="checkbox5" type="checkbox" />
<span>LI12</span>
</li>
</ul>
</div>
I have dynamic list in WordPres and each <li> has a class. I have no control of the content inside class="woof_list woof_list_radio" because it is generated by a plugin.
<ul class="woof_list woof_list_radio">
<li class="woof_term_224">
<label class="woof_radio_label " for="woof_unselect">Parent 1</label>
</li>
<br>
<li class="woof_term_225">
<label class="woof_radio_label " for="woof_unselect">Parent 2</label>
</li>
<br>
<li class="woof_term_226">
<label class="woof_radio_label " for="woof_unselect">Parent 3</label>
</li>
</ul>
<br>
<ul class="banner-info-list">
<li class="woof_term_224" style="display: none;">
<h1 class="et_pb_module_header">Title 1</h1>
<span class="et_pb_fullwidth_header_subhead">Content 1</span>
</li>
<li class="woof_term_225" style="display: none;">
<h1 class="et_pb_module_header">Title 2</h1>
<span class="et_pb_fullwidth_header_subhead">Content 2</span>
</li>
<li class="woof_term_226" style="display: none;">
<h1 class="et_pb_module_header">Title 3</h1>
<span class="et_pb_fullwidth_header_subhead">Content 3</span>
</li>
</ul>
I want to show one of the <li> inside class="banner-info-list" to whatever <li> was clicked inside class="woof_list woof_list_radio"
For example: If I click Parent 1 <label>, I want to show the content of
<li class="woof_term_226" style="display: none;">
<h1 class="et_pb_module_header">Title 3</h1>
<span class="et_pb_fullwidth_header_subhead">Content 3</span>
</li>
because they have the same class that is equal to woof_term_226
This is my current jquery code but it is not yet complete:
j('.woof_list_radio .woof_radio_label').click(function(e) {
e.preventDefault();
var firstClass = j(this).attr('class');
console.log(firstClass);
j(firstClass).show('slow').siblings().hide('slow');
});
You can get the class name attribute on each click, and use it on .banner-info-list selector to find the li you need to show:
$(document).on("click", ".woof_list_radio .woof_radio_label", function() {
var classAttr = $(this).closest("li").attr("class")
$(".banner-info-list li[class^='woof_term_']").hide()
$(".banner-info-list").find("."+classAttr).show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="woof_list woof_list_radio">
<li class="woof_term_224">
<label class="woof_radio_label " for="woof_unselect">Parent 1</label>
</li>
<br>
<li class="woof_term_225">
<label class="woof_radio_label " for="woof_unselect">Parent 2</label>
</li>
<br>
<li class="woof_term_226">
<label class="woof_radio_label " for="woof_unselect">Parent 3</label>
</li>
</ul>
<br>
<ul class="banner-info-list">
<li class="woof_term_224" style="display: none;">
<h1 class="et_pb_module_header">Title 1</h1>
<span class="et_pb_fullwidth_header_subhead">Content 1</span>
</li>
<li class="woof_term_225" style="display: none;">
<h1 class="et_pb_module_header">Title 2</h1>
<span class="et_pb_fullwidth_header_subhead">Content 2</span>
</li>
<li class="woof_term_226" style="display: none;">
<h1 class="et_pb_module_header">Title 3</h1>
<span class="et_pb_fullwidth_header_subhead">Content 3</span>
</li>
</ul>
You need to target the parent class, and at the same time, you should only show the li.whateverClass in the banner-info.
Sp you jQuery could be done like this :
j('.woof_list_radio .woof_radio_label').click(function(e) {
e.preventDefault();
//Getting the parent class
var firstClass = j(this).closest('li').attr('class');
console.log(firstClass);
//Showing the correct li
j('.banner-info-list > li.'+firstClass).show('slow').siblings().hide('slow');
});
I have a screen with filters on it. I am trying to align then horizontally and arrange the un-ordered list in columns for 2 each. I tried to give them spacing, clear, display block. The css i used stacks one below another but has all checkboxes/links next to each other unlike columns.
Image:
HTML Markup:
<div style="clear: both;">
<div style="display: inline;">
<div>
Value Filter
</div>
<div>
<ul style="list-style-type: none;">
<li style="list-style-type: none;">
<input type="checkbox" value="All" />All</li>
<li style="list-style-type: none;">
<input type="checkbox" value="V1" />V1</li>
<li style="list-style-type: none;">
<input type="checkbox" value="V2" />V2</li>
<li style="list-style-type: none;">
<input type="checkbox" value="V3" />V3</li>
</ul>
</div>
</div>
<div style="display: inline;">
<div>
Date Filter
</div>
<div>
<ul style="list-style-type: none;">
<li style="list-style-type: none;">Date 1</li>
<li style="list-style-type: none;">Date 2</li>
<li style="list-style-type: none;">Date 3</li>
<li style="list-style-type: none;">Date 4</li>
</ul>
</div>
</div>
<div style="display: inline;">
<div>
Month Filter:
</div>
<div>
<ul style="list-style-type: none;">
<li style="list-style-type: none;">Month 1</li>
<li style="list-style-type: none;">Month 2</li>
<li style="list-style-type: none;">Month 3</li>
<li style="list-style-type: none;">Month 4</li>
</ul>
</div>
</div>
</div>
Any help in this regard is highly appreciated.
Try this DEMO
HTML
<div class="filter">
<div>
Value Filter
</div>
<div>
<ul>
<li style="list-style-type: none;">
<input type="checkbox" value="All" />All</li>
<li style="list-style-type: none;">
<input type="checkbox" value="V1" />V1</li>
<li style="list-style-type: none;">
<input type="checkbox" value="V2" />V2</li>
<li style="list-style-type: none;">
<input type="checkbox" value="V3" />V3</li>
</ul>
</div>
</div>
<div class="filter">
<div>
Date Filter
</div>
<div>
<ul>
<li style="list-style-type: none;">Date 1</li>
<li style="list-style-type: none;">Date 2</li>
<li style="list-style-type: none;">Date 3</li>
<li style="list-style-type: none;">Date 4</li>
</ul>
</div>
</div>
<div class="filter">
<div>
Month Filter:
</div>
<div>
<ul>
<li style="list-style-type: none;">Month 1</li>
<li style="list-style-type: none;">Month 2</li>
<li style="list-style-type: none;">Month 3</li>
<li style="list-style-type: none;">Month 4</li>
</ul>
</div>
</div>
CSS
.filter{
width:33%;
float:left;
}
.filter ul{
width:100%;
display:block;
}
.filter ul li{
width:50%;
float:left;
}
Try adding float for outer column div's: Demo
.fl{
float:left;
margin-left:30px; / * optional for better visibility added space */
}
HTML:
<div class="fl">... </div>
<div class="fl">... </div>
<div class="fl">... </div>
Try these. Check this link https://jsfiddle.net/4xm5gks9/
<div style="float: left; width: 100%;">
<div style="width: 20%; float: left;">
<div>
Value Filter
</div>
<div>
<ul style="list-style-type: none;">
<li style="list-style-type: none;">
<input value="All" type="checkbox">All</li>
<li style="list-style-type: none;">
<input value="V1" type="checkbox">V1</li>
<li style="list-style-type: none;">
<input value="V2" type="checkbox">V2</li>
<li style="list-style-type: none;">
<input value="V3" type="checkbox">V3</li>
</ul>
</div>
</div>
<div style="width: 20%; float: left;">
<div>
Date Filter
</div>
<div>
<ul style="list-style-type: none;">
<li style="list-style-type: none;">Date 1</li>
<li style="list-style-type: none;">Date 2</li>
<li style="list-style-type: none;">Date 3</li>
<li style="list-style-type: none;">Date 4</li>
</ul>
</div>
</div>
<div style="width: 20%; float: left;">
<div>
Month Filter:
</div>
<div>
<ul style="list-style-type: none;">
<li style="list-style-type: none;">Month 1</li>
<li style="list-style-type: none;">Month 2</li>
<li style="list-style-type: none;">Month 3</li>
<li style="list-style-type: none;">Month 4</li>
</ul>
</div>
</div>
</div>
css
div ul{
float:left;
}
HTML
<div class="filterBlock">
<h3>Value Filter</h3>
<ul>
<li>
<input type="checkbox" value="All">All
</li>
<li>
<input type="checkbox" value="V1">V1
</li>
<li>
<input type="checkbox" value="V2">V2
</li>
<li>
<input type="checkbox" value="V3">V3
</li>
</ul>
</div>
<div class="filterBlock">
<h3>Date Filter</h3>
<ul>
<li>
Date 1
</li>
<li>
Date 2
</li>
<li>
Date 3
</li>
<li>
Date 4
</li>
</ul>
</div>
<div class="filterBlock">
<h3>Month Filter</h3>
<ul>
<li>
Month 1
</li>
<li>
Month 2
</li>
<li>
Month 3
</li>
<li>
Month 4
</li>
</ul>
</div>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.filterBlock{
float: left;
margin-right: 50px;
}
.filterBlock:last-child{
margin-right: 0;
}
.filterBlock ul li{
margin-bottom: 5px;
text-align: center;
}
.filterBlock ul li input[type="checkbox"]{
display: inline-block;
}
I'm struggling to find the correct code to a navigation sidebar on a angularJS app. What should happen is when you click a link a background color should highlight the active link. It does work as expected except you have to click each link twice before the highlight shows.
What is it that I'm doing wrong? Any help would be greatly appreciated.
javascript
$scope.addActiveClass = function ($index) {
$scope.addActiveClass = $index;
var checked = $('ul.sidebar2-nav li');
$(checked).on("click", "", function () {
$(this).addClass('active-label');
});
}
html
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: evaluations}" ui-sref-active="active" ui-sref=".evaluation">Evaluations</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: questions}" ui-sref-active="active" ui-sref=".question">Questions</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass()" ng-class="{active: hstranscripts}" ui-sref-active="active" ui-sref=".hstranscripts">High School Transcripts</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: collegetranscripts}" ui-sref-active="active" ui-sref=".collegetranscripts">College Transcripts & Course Work</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: prerequisites}" ui-sref-active="active" ui-sref=".prerequisites">Prerequisites</a>
</label>
</div>
</li>
<li ui-sref-active="active-label">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-click="addActiveClass($index)" ng-class="{active: documents}" ui-sref-active="active" ui-sref=".document">Documents</a>
</label>
</div>
</li>
</ul>
</nav>
CSS
ul.sidebar2-nav li a.active {
color: #000;
cursor: pointer;
text-decoration: none;
}
ul.sidebar2-nav li.active-label {
background: whitesmoke;
}
I found the solution. Your example was correct, but in my html code I had this:
<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
Notice how the anchor tag has the ng-class and the ui-sref-active on it. I removed these attributes and it works as expected. Thank you for your guidance, I appreciate it!!
Move click event from a to parent li tag
<nav id="program-editor-pullout" menustate="closed" >
<ul class="list-unstyled sidebar2-nav">
<li ui-sref-active="active-label" ng-click="addActiveClass($event, $index)">
<div class="checkbox">
<label>
<input type="checkbox" ng-checked="true">
<a ng-class="{active: home}" ui-sref-active="active" ui-sref=".home">Home</a>
</label>
</div>
</li>
Change your click handler to something like this
$scope.addActiveClass = function ($event, $index) {
$scope.addActiveClass = $index;
//var checked = $('ul.sidebar2-nav li');
//$(checked).on("click", "", function () {
// $(this).addClass('active-label');
//});
$($event.target).addClass('active-label');
}
Hi I have the following structure:
<ul class="main">
<li class="toggle">
<input type="checkbox"> information
</li>
<ul>
<li class="modulo">
<input type="checkbox"> General
</li>
<ul>
<li class="example1">
<input type="checkbox">
</li>
<li class="example2">
<input type="checkbox">
</li>
</ul>
</ul>
</ul>
I now need to know how to set all the children checkboxes to "checked" when the main parent checkbox is checked by the user
Im using jQuery, thanks
Your can change markup like following:
<ul class="main">
<li class="toggle">
<input type="checkbox"> information
<ul>
<li class="example1">
<input type="checkbox">
</li>
<li class="example2">
<input type="checkbox">
</li>
</ul>
</li>
<li class="modulo">
<input type="checkbox"> General
<ul>
<li class="example1">
<input type="checkbox">
</li>
<li class="example2">
<input type="checkbox">
</li>
</ul>
</li>
</ul>
jQuery
$('ul.main > li > :checkbox').change(function() {
$(this).next('ul').find(':checkbox').prop('checked', this.checked);
});
If you correct your markup:
<ul class="main">
<li class="toggle">
<input type="checkbox"> information
<ul>
<li class="modulo">
<input type="checkbox"> General
<ul>
<li class="example1">
<input type="checkbox">
</li>
<li class="example2">
<input type="checkbox">
</li>
</ul>
</li>
</ul>
</li>
</ul>
...this should do it:
$(".main input[type='checkbox']").click(function() {
$(this).parent().find("input[type='checkbox']").prop("checked", this.checked);
});
Live example | source
Then you'll want to handle the converse case (unchecking the parent if you uncheck an ancestor so all ancestors are no longer checked), but I leave that as an exercise for you.
This toggles the checks: http://jsfiddle.net/
I'd suggest you indent your code for more easy reading too.