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');
}
Related
Im working on the li which contain checkbox for each list-item-group. When i click on the checkbox in each of the list, it should addClass for the list but it addClass for all of my list even i only checked one of the checkbox.
here is my code. I want addclass only applied on itself li instead of applying all addclass to all the li
<ul class="sortable-list taskList list-unstyled ui-sortable">
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.1
</li>
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.2
</li>
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.3
</li>
</ul>
and this is my jquery
<script>
$('input.cbx').on('change', function () {
if ($(this).is(":checked")) {
$('.ui-sortable li').addClass("task-warning");
} else {
$('.ui-sortable li').removeClass("task-warning");
}
});
</script>
You need to find the closest li element to $(this) to apply the class to:
$('input.cbx').on('change', function () {
if ($(this).is(":checked")) {
$(this).closest('li').addClass("task-warning");
} else {
$(this).closest('li').removeClass("task-warning");
}
});
.task-warning { background-color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sortable-list taskList list-unstyled ui-sortable">
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.1
</li>
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.2
</li>
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.3
</li>
</ul>
That is expected as the selector you are using .ui-sortable li selects all li items inside of the list. You need to refactor how your code works. I would recommend looping through the list and removing the class when its not checked.
Something like this:
(PS. I dont know Jquery too well so i wrote it in vanilla JavaScript)
$('input.cbx').on('change', function () {
let list_items = document.querySelectorAll(".ui-sortable li");
for (let i = 0; i < list_items.length; i++) {
if (list_items[i].childNodes[1].childNodes[1].checked) {
list_items[i].classList.add("task-warning")
} else {
list_items[i].classList.remove("task-warning")
}
}
});
You need to $(this).addClass("task-warning"); to get that particular checkbox.
$('input.cbx').on('change', function() {
if ($(this).is(":checked")) {
$(this).parent().addClass("task-warning");
// $(this).closest('li').addClass("task-warning"); for li
} else {
$(this).parent().removeClass("task-warning");
// $(this).closest('li').removeClass("task-warning"); for li
}
});
.task-warning {
background: orange;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul class="sortable-list taskList list-unstyled ui-sortable">
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.1
</li>
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.2
</li>
<li class="ui-sortable-handle">
<div class="checkbox checkbox-custom checkbox-single pull-right">
<input id="checkbox1" type="checkbox" aria-label="Single checkbox Two" class="cbx">
<label>Normal</label>
</div>
No.3
</li>
</ul>
HTML:
<ul class="treeview">
<li>
<a data-toggle="collapse" href=".options1"> <!-- this one -->
Item 1
</a>
<ul class="collapse options1">
<li>
<a data-toggle="collapse" href=".sublevel1"></a> <!-- this one -->
<input type="checkbox" value="option1" />
<a data-toggle="collapse" href=".sublevel1">Item 1-1</a> <!-- not this one -->
<ul class="collapse sublevel1">
<li>
Item 1-1-1
<ul>
<li><input type="checkbox" value="option1" />
Item 1-1-1-1
</li>
<li><a data-toggle="collapse" href=".collapse1-1-1-1-1"></a> <!-- this one -->
<input type="checkbox" value="option1" />
<a data-toggle="collapse" href=".collapse1-1-1-1-1">Item 1-1-1-2</a> <!-- not this one -->
<ul class="collapse collapse1-1-1-1-1">
<li>Item 1-1-1-2-1
<ul>
<li><input type="checkbox" value="option1" />Item 1-1-1-2-1-1</li>
<li><a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1"></a><input type="checkbox" value="option1" />
<a data-toggle="collapse" href=".collapse1-1-1-1-1-1-1">Item 1-1-1-2-1-2</a>
<ul class="collapse collapse1-1-1-1-1-1-1">
<li>Item 1-1-1-2-1-2-1
<ul>
<li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-1</li>
<li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-2</li>
<li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-3</li>
<li><input type="checkbox" value="option1" />Item 1-1-1-2-1-2-1-4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><input type="checkbox" value="option1" />Item 1-2</li>
<li><input type="checkbox" value="option1" />Item 1-3</li>
<li><input type="checkbox" value="option1" />Item 1-4</li>
</ul>
</li>
</ul>
jQuery:
$('.treeview ul').not('ul:not([class])').siblings('a')
.prepend("<span>XYZ</span>");
As you can see, I'm already looking for all <ul>'s which don't have ANY classname, and then looking for <a> siblings, but I only need the first sibling (before the input checkbox).
Here's a jsFiddle to help you out: https://jsfiddle.net/st2yehgr/1/ (tip: all the item that have double 'XYZ', I only want the first one)
Can anyone help me here?? Cheers! :)
You can try this
$('.treeview li>a:first-child')
.prepend("<span>XYZ</span>");
Check this fiddle
Answered by :#mplungjan
$('.treeview ul').not('ul:not([class])').each(function() {
$(this).find("a").first().prepend("<span>XYZ</span>");
});
His fiddle: https://jsfiddle.net/qtrhu249/1/ (which I then updated the html to also cover the first level [wrapped everything in a div]).
$('.collapse li').find( "input[type='checkbox']" ).prev().prepend("<span>XYZ</span>")
Try this
I am trying to create an expandable accordion using jquery. I am not able to figure out that how am I supposed to prevent it from expanding on page load. I have no idea of jquery,and any help will be greatly appreciated.
<ul>
<li class="expandable root">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="accordion">
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul id="accordion">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
JS File:
$(document).ready(function(){
$('.expand-icon').click(function(){
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
});
You an find the bootply at this link: http://www.bootply.com/1W8bSTnmx6
Fiddle Here
This is because you have this first accordian open when loading it. To fix it, do a click operation on this at the time of load with $($('#accordion .expand-icon')[0]).click();. Check the working example here http://www.bootply.com/vGoKbvfKtl
you are just displaying all the accordions when the page gets loaded since there is no hiding any where.
According to your code Since only the first Accordion contains the data, it is getting displayed else every expandable div will get displayed.
The solution for this is to add a hide class to the class accordion so that it does not display at the beginning, the at the time of click function, you can remove that class and it gets displayed.
$(document).ready(function(){
$('.expand-icon').click(function(){
$('ul').removeClass('hide')
var elem = $(this);
if(elem.hasClass('active')) {
elem.removeClass('active');
var subElem = elem.siblings('ul');
var nestedElem =elem.siblings('ul').find('ul');
if(nestedElem.length == 0) {
subElem.slideUp('fast');
}
else {
nestedElem.slideUp('fast',function(){
subElem.slideUp('fast');
});
}
$.when(elem.removeClass('glyphicon-minus')).then(function(){
elem.addClass('glyphicon-plus');
});
}
else {
elem.addClass('active');
elem.siblings('ul').slideDown('fast',function(){
elem.siblings('ul').find('ul').slideDown('fast');
});
$.when(elem.removeClass('glyphicon-plus')).then(function(){
elem.addClass('glyphicon-minus');
});
}
});
$('.expandable :checkbox').on('change', function() {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
});
$(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
});
$('.organization').click(function(){
$('.accordion')[0].click()
})
});
<ul>
<li class="expandable ">
<label for=" Oraganization" class="active"> Oraganization</label>
<span class=" organization active expand-icon glyphicon glyphicon-minus"></span>
<ul id="">
<li class="expandable">
<span class="expand-icon glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-1">
<label for="Manager-1"> Manager-1</label>
<ul class="accordion hide">
<li>
<input type="checkbox" id="Sub-Manager-1">
<label for="Sub-Manager-1"> Sub-Manager-1</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Sub-Manager-2">
<label for="Sub-Manager-2"> Sub-Manager-2</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Associate-1">
<label for="Associate-1"> Associate-1</label>
</li>
<li>
<input type="checkbox" id="Associate-2">
<label for="Associate-2"> Associate-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-minus"></span>
<input type="checkbox" id="Associate-5">
<label for="Associate-5"> Associate-5</label>
<ul class="accordion">
<li>
<input type="checkbox" id="Sub-associate-1">
<label for="Sub-associate-1"> Sub-associate-1</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-2">
<label for="Sub-associate-2"> Sub-associate-2</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-3">
<label for="Sub-associate-3"> Sub-associate-3</label>
</li>
<li>
<input type="checkbox" id="Sub-associate-4">
<label for="Sub-associate-4"> Sub-associate-4</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-2">
<label for="Manager-2"> Manager-2</label>
</li>
<li class="expandable">
<span class="expand-icon active glyphicon glyphicon-plus"></span>
<input type="checkbox" id="Manager-3">
<label for="Manager-3"> Manager-3</label>
</li>
</ul>
</li>
</ul>
Here is the bootply,
Bootply link for it
I have a list of checkboxes within multiple ul tags. I want to uncheck and check all using an href for each list. (There will be several lists, here I have provided HTML for two lists) The code does not work in that the checkboxes are not all checked or unchecked on click.. Can anyone help please?
Here is what I have tried so far in a JSFIDDLE
<div class="col-xs-4 col-lg-3">
<div class="btn-group options" id="checkboxes-div-1" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-first" type="button" data-toggle="dropdown" >
Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-first" id="close-out" role="menu" name="form3">
<li class="option">
<a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #1 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #2 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #3 for group 1
</label>
</div>
</li>
<li><strong>Group 2</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Forum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol
</label>
</div>
</li>
</ul>
</div> <!--/.btn-group-->
</div> <!--/.col-xs-6-->
</div> <!--/.third-row-->
<div class="row fourth-row">
<div class="col-xs-4 col-lg-3">
<div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown" >
Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3">
<li class="option">
<a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Option #1 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Option #2 for group 1
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" >Option #3 for group 1
</label>
</div>
</li>
<li><strong>Group 2</strong></li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Forum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum
</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol
</label>
</div>
</li>
</ul>
</div> <!--/.btn-group-->
</div> <!--/.col-xs-6-->
</div> <!--/.fourth-row-->
My jquery:
$.each($('.checkbox-div'), function () {
$(".checkall").click(function() {
$(":checkbox.only-this").attr("checked", true);
})
$(".uncheckall").click(function() {
$(":checkbox").attr("checked", false);
})
});
http://jsfiddle.net/r2yLq61o/
Use this instead:
$(".checkall").click(function () {
$(this).closest('ul').find('input[type="checkbox"]').prop("checked", true);
})
$(".uncheckall").click(function () {
$(this).closest('ul').find('input[type="checkbox"]').prop("checked", false);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-xs-4 col-lg-3">
<div class="btn-group options" id="checkboxes-div-1" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-first" type="button" data-toggle="dropdown">Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-first" id="close-out" role="menu" name="form3">
<li class="option"> <a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #1 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #2 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox" class="only-this show-cross-2">Option #3 for group 1</label>
</div>
</li>
<li><strong>Group 2</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Forum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol</label>
</div>
</li>
</ul>
</div>
<!--/.btn-group-->
</div>
<!--/.col-xs-6-->
</div>
<!--/.third-row-->
<div class="row fourth-row">
<div class="col-xs-4 col-lg-3">
<div class="btn-group options hide" id="checkboxes-div-2" class="checkbox-div">
<button class="btn btn-default dropdown-toggle open-second" type="button" data-toggle="dropdown">Select one or more options <span class="caret"></span>
</button>
<ul class="dropdown-menu check-second" id="close-out" role="menu" name="form3">
<li class="option"> <a class="checkall show-cross-2" href="#">Check all</a>
<a class="uncheckall" href="#">Uncheck all</a>
</li>
<li><strong>Group 1</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Option #1 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Option #2 for group 1</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Option #3 for group 1</label>
</div>
</li>
<li><strong>Group 2</strong>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Forum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Ipsum</label>
</div>
</li>
<li class="option">
<div class="checkbox">
<label>
<input type="checkbox">Dorol</label>
</div>
</li>
</ul>
</div>
<!--/.btn-group-->
</div>
<!--/.col-xs-6-->
</div>
<!--/.fourth-row-->
And one more way, more strictly connected to DOM structure:
Fiddle.
$(document).ready(function()
{
$(".checkall").click(function()
{
handleOptions(this, true);
});
$(".uncheckall").click(function()
{
handleOptions(this, false);
});
function handleOptions(element, value)
{
var optionBlocks = $(element).parent().siblings('.option');
optionBlocks.find("input").prop("checked", value);
}
});
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.