We Keep Coding

How to toggle data attribute value according to checkbox states?

I tried to set data-active attribute of <li> element to Y "Yes", or N "No" according to the active checkbox states either checked or unchecked respectively.
My sample code is like this:
$(document).ready(function() {
$('body').on('change','#active',function(){
li = $(this).parent();
if($(this).attr('checked')=='true') {
$(this).attr('checked','false');
li.attr('data-active','N');
} else {
li.attr('data-active','Y');
$(this).attr('checked','true');
}
console.log(li.data('active'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ol class="example">
<li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li>
</ol>
From my code above, the event handler on #active matched only in else clause, regardless to whatever the checkbox state is.
Understanding that there are plenty of similar questions to mine, however I tried them but none solves my problem.
How can I do to toggle data-active to "yes" or "no" according to checkbox state? Thanks.

You should use .data and .prop instead of .attr
Hope it helps!
$(document).ready(function() {
$('body').on('change','#active',function(){
li = $(this).parent();
if ($(this).prop('checked')) {
li.data('active','Y');
} else {
li.data('active','N');
}
console.log(li.data('active'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ol class="example">
<li data-active="N">Option2 (Active <input id="active" type="checkbox">)</li>
</ol>

In Html Click On list (li) item not working with jquery

I am new to Html,jQuery coding.I want to change background color of item selected(clicked) of an li.
I have my code below :
#In HTML#
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li style="list-style: none; display:inline;padding-left:5px;" class="text-primary" ng-click="GetProducts(x.code)" ng-repeat="x in Major">{{x.code}}</li>
</ul>
</div>
# In controller#
$('#major li').click(function () {
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
});
What am I doing wrong ? When I click on li item, It doesn't call that function.
IF I use this dynamic list it doesn't hit that function but if I use static list it does hit that function.How should I implement click function for dynamic list?

When I click on li item, It doesn't call that function.
Are you sure JQuery is loaded properly?
Are you sure, you're not setting another click event for your list items?
Is your CSS defined correctly?
Anyway, this works for me:
$(document).ready(function () {
$('#major li').click(function () {
$('li').removeClass('selected');
$(this).addClass('selected');
console.log("HERE");
});
});
.selected{
background: #FF00FF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong>
<ul>
<li>XXXXX</li>
<li>YYYY</li>
</ul>
</div>

The click event is triggered (check with console.log function) but the action you execute are not defined properly.
$('li').removeClass('text-primary.selected');
$(this).addClass('text-primary.selected');
should be
$('li').removeClass('selected');
$(this).addClass('selected');
If your list is dynamically generated (not in the DOM on page load), the problem may come from the click function. In this case, just use :
$(document).on('click', '#major li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
where you can replace document by the container of your list. Per example :
$('#major').on('click', 'li', function () {
$('li').removeClass('selected');
$(this).addClass('selected');
});
Here is a JSfiddle with working example: https://jsfiddle.net/ztvdnh86/2/

Try this:
# In controller#
$('#major li').click(function () {
$('li.selected').removeClass('text-primary selected');
$(this).addClass('text-primary selected');
});

what you've written 'text-primary.selected' tries to select the element with the tag-name text-primary with the class .selected
what you want to do is to remove the selected class from all the lis with the class text-primary and then add the class selected to the clicked (selected) element:
$('#major li').click(function () {
$('li.text-primary.selected').removeClass('selected');
$(this).addClass('selected');
});

Make li item boxes pop out in order jQuery

I have a footer list:
<footer id="footer">
<ul>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xxx</p>
<p> xxxx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx </p>
<p> xx </p>
</li>
<li>
<h2> x </h2>
<h3> xx </h3>
<p>xx</p>
<p> xxx</p>
</li>
</ul>
</footer>
that pops out on click to two separate links, like so:
$(document).ready(function() {
$( "#add" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
$(document).ready(function() {
$( "ul li:eq(3)" ).click(function() {
$( "#footer" ).toggle( "fast" );
});
});
I would like these ul boxes, after their current popout link is clicked, to either fill with content one after the other in order, or have the boxes themselves pop out one at a time. Input wherever I can do better is helpful as well; I'm a rookie. Bonus: how to have the boxes revert in order when those two links in question are clicked again to close? Thanks all.
edit: the two links that pop out the footer are here, the contact link and the phone image:
<section id="side">
<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
<ul>
<li> About </li>
<li> Providers </li>
<li> Quality </li>
<li> Contact </li>
</ul>
<img id="add" src="images/phoner.png"></img>
</nav>
</section>

Something like this maybe?
$(document).ready(function() {
var $footer = $("#footer").hide(),
$footerItems = $footer.find("ul li").hide(),
footerState = 0;
$("#add, .sidebar ul li").click(function (e) {
e.preventDefault();
footerState = !footerState;
var method = footerState ? 'show' : 'hide';
if(footerState) $footer.show();
$footerItems.get().reduce(function (p, li) {
return p.then(function() {
return $(li)[method]('slow').promise();
});
}, $.when()).then(function() {
if(!footerState) $footer.hide();
});
});
});
DEMO

https://jsfiddle.net/m173gxvg/3/
Something like this? If yes, here are the modifications:
Remove the display:none from the footer css
Add the display:none to the footer ul li css
Modify the javascript code
Here's the js to use after the click:
toggleTimer=500;
$( "#footer" ).find("ul").find("li").each(function() {
jQuery(this).toggle(toggleTimer);
toggleTimer=toggleTimer+500;
});

I think you want to click on each one and then show the next one, is that right?
Then you can use the .next() jquery property to assign the click listener to toggle the next element.
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(function() {
//if none are visible, show the first one, else hide them all
if ($('#footer').find('li').first().css('display') == 'none' ) {
//show the fist LI
$( "#footer" ).find('li').first().toggle( "fast" );
} else {
//hide them all
$('#footer').find('li').hide();
}
});
//add listener to each LI to toggle the NEXT one
$('#footer').find('li').click(function(){
$(this).next().toggle("fast");
});
});
... after your comment...
OR You can show the FIRST hidden one on each click like this:
$(document).ready(function() {
//start with all LI hidden
$('#footer').find('li').hide();
//add click listener to the id='add' element to toggle the first LI
$( "#add" ).click(
function() {
//if NO LI are hidden, hide them all, else show one at a time
if ( $('#footer').find('li:hidden').size()==0 ) {
//hide them all
$('#footer').find('li').hide();
} else {
//show the first hidden LI
$('#footer').find('li:hidden').first().show('fast');
}
}
);
});
Is that what you're looking for?

Building a list dynamically (depending on checkboxes)

I have the following question:
I have a couple of checkboxes (at the moment 11) and what I want to do now is "building" a list dynamically, depending on the value of the checkboxes, so having something like this:
A user comes, ticks a checkbox and one li is appearing, when he ticks the next one, the next li is appearing, when he ticks the next one, again one li is appearing and so on (when he unticks one of them, the li should disappear again). I'm quite sure this can work with JS, but I have no idea how to realize it.
What I have is a <ul> and all the checkboxes defined with
<input type="checkbox" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
(Every checkbox has it's individual name)
What I think is going to be the biggest problem is creating the list-points dynamically, but I really hope somebody knows how to do this.
What I already thought about is just having 11 list-points in my list, all set to display:none and then just setting them to display:block when a checkbox is checked, but this will propably not work because I'm using a plugin to resort the list after this, and having 11 list-points, but just 2 visible or anything like that won't work.
Thanks for your help!

Here is a very quick demo, each time a checkbox is changed it creates all checked list items.
$(document).ready(function(){
$('.item').on('change', function() {
var $list = $('ul#checked').empty();
$('.item:checked').each(function(index, item) {
var itemName = $(item).prop('name');
var text = $('label[for='+itemName+']').text()
$('<li></li>')
.text(text)
.appendTo($list)
;
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="item" name="check_phone" id="check_phone"/>
<label for="check_phone"><span></span>Phone Number</label>
<ul id="checked">
</ul>

$("[name^='check_']").click(function(){
$("li."+ this.name).toggle( this.checked );
});
#check_list li{ display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="check_phone"/>Phone Number</label>
<label><input type="checkbox" name="check_mobile"/>Mobile Number</label>
<ul id="check_list">
<li class="check_phone">PHONE LI</li>
<li class="check_mobile">MOBILE LI</li>
</ul>

I think this will do it. You just have to set the names of the list items to be the same as their corresponding checkboxes' names.
$("input:checkbox").click(function() {
var current = $(this),
linkedListCorrespondingElement = $('#list-id > li[' + current.attr('name') + ']');
if (current.is(":checked")) {
linkedListCorrespondingElement.show();
} else {
linkedListCorrespondingElement.hide();
}
});

Search Box filter in Javascript/jquery

Background
HTML Page having navigation on left and body on right. In Navigation, five tabs are there. ul is being used and several li elements exists in each vertical tab. Each vertical tab has search box to filter the data.
1) HTML Code
<h3>First</h3>
<div>
<input type="text" id="Searchtab1" />
<ul id="Firstul">
<li>Germany</li>
<li>France</li>
<li>Sydney</li>
</ul>
</div>
Script code
$("#Searchtab1").on("keyup click input", function () {
if (this.value.length > 0) {
$("#Firstul li").hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
}
else {
$("#Firstul li").show();
}
Similarly there are five vertical navigation tab has similar code. Now the problem is there is one requirement to have one global search box on top of these searches i.e. One search box on top of HTML which will filter all navigation tabs. User can further filter on individual tabs. Basic filter is working fine when i search again on individual navigation it lists all elements again. Basically the global search takes precedence followed by local search, it should be able to handle case when user changes anything on Globalsearch/local search, it should change by considering the both search options(global first)
This is what i have tried
FiddleLink
Can someone suggest how to correct this.

Try this:
Add class (alluls) for all ul elems (or use some jquery selector to select them) and:
$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
});
}
else {
$(".alluls li").show();
}
Edit: removed click event
http://jsfiddle.net/EchoSin/p5jxB/6/

Have you tried something like this JSFIDDLE?
Link: https://jsfiddle.net/umaar/t82gZ/
HTML
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>
<nav>
<ul>
<li>Jim James</li>
<li>Hello Bye</li>
<li>Wassup Food</li>
<li>Contact Us</li>
<li>Bleep bloop</li>
<li>jQuery HTML</li>
<li>CSS HTML AJAX</li>
<li>HTML5 Net Set</li>
<li>Node Easy</li>
<li>Listing Bloop</li>
<li>Contact HTML5</li>
<li>CSS3 Ajax</li>
<li>ET</li>
</ul>
</nav>}
JavaScript
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$("nav ul li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});
Granted this isn't your exact answer, made for just you! But I created that fiddle and maybe it can help you! If you want a different fiddle see the above answer! (EchoSin's)
$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)== 0;
}).show();
});
}
else {
$(".alluls li").show();
}
https://jsfiddle.net/EchoSin/p5jxB/6/