We Keep Coding

How I can use that code with two dropdown menus?

How I can use that code with two dropdown menus? Actually when I reload the page the first dropdown menu stays like I want but the second one no. Thanks. Sorry to ask, Im new in all this incredible world!
var init = function () {
strong text
var sel = $("select"),
but = $("button");
var clearSelected = function () {
sel.find(":selected").prop("selected", false);
};
if (localStorage.getItem("pref")) {
var pref = localStorage.getItem("pref");
clearSelected();
//set the selected state to true on the option localStorage remembers
sel.find("#" + pref).prop("selected", true);
}
var setPreference = function () {
//remember the ID of the option the user selected
localStorage.setItem("pref", sel.find(":selected").attr("id"));
};
var reset = function () {
clearSelected();
localStorage.setItem("pref", undefined);
};
sel.on("change", setPreference);
but.on("click", reset);
};
$(init);
**strong text**

I think .filter is what your need here. See this
.find will return the first element it founds that responds to the criteria you give. That's why your first dropdowm list is correct and not the second.
Also, for your storage, I guess you have 2 choices:
Set an item for the first dropdown menu, and another one for the second one that you can handle separatly.
Set only one item but containing an array of the values selected. With this solution you would have to set the item with an object as so
Hope I helped.
EDIT
I think this should do the math

Bootstrap form group checkboxes doesn't get checked in between nav pills

Here's the JSFiddle of my work: https://jsfiddle.net/pb23Ljd8/5/
I use Bootstrap nav-pills to show all products and categorized too like this:
And I based my checkboxes from here: http://bootsnipp.com/snippets/featured/fancy-bootstrap-checkboxes
I count the number of products checked in between the tabs like this:
jQuery(document).ready(function($) {
jQuery(".select-product").change(function() {
jQuery(".counter").text(jQuery("[type='checkbox']:checked").length);
});
});
But the glyphicon check icons doesn't appear on the second and third tabs for some reason. But when I click the products on the second and third, it increases the counter and also when I view it on the first tab, it is checked.
I just need the products to also be visibly checked on the second and third tabs and not only on the first one so it's not confusing for the user.
Ideas, anyone?
Edit: I fetch the list of products from CMS so it's dynamic. I now understand that the duplication of IDs is causing the problem.

Before we try and resolve this issues, we should break it down and see what the actual problem is.
First, let's check if we remove the content from tab 1b is the issue still present?
Nope, if we remove the checkboxes from the first tab, the checkboxes function normally on the second and third.
Fiddle #1
What if we change the id of the checkboxes (remember ids should be unique).
Notice how Book #1 now works if we change the first checkbox's id to 1a.
Fiddle #2
So now we "know" the issue is likely due to the fact that we are using checkboxes with the same id value (ref). The "issue" is now:
How do we check multiple checkboxes if one is checked
(or something like that)
Here's what I would do:
assign all "like" checkboxes the same class (ex. Book #1 checkboxes will have class b1)
use jQuery/javascript to make sure all that all "like" checkboxes, check and uncheck in unison
Working Example
EDIT
Dynamic values for the classes can be achieved by putting the IDs as classes so the similar products would match. These can be passed to JS like this assuming that $products_id_array is a PHP array that contains all the classes needed.
var productIDs = <?php echo json_encode($products_id_array) ?>;
and then creating the snippet of jQuery code on the fiddle like this
productIDs.forEach(function(val, key) {
jQuery('.' + val).on('change', function(){
jQuery('.' + val).prop('checked',this.checked);
});
})

Try this JS, This will work
jQuery(".select-product").change(function() {
var checkValue = jQuery(this).prop('checked');
$('.select-product#' + jQuery(this)[0].id).each(function() {
if (checkValue == true) {
jQuery(this).prop('checked', true)
} else {
jQuery(this).prop('checked', false);
}
});
var uniqueId = [];
jQuery("[type='checkbox']:checked").each(function() {
uniqueId.push(jQuery(this)[0].id);
});
Array.prototype.getUnique = function() {
var u = {},
a = [];
for (var i = 0, l = this.length; i < l; ++i) {
if (u.hasOwnProperty(this[i])) {
continue;
}
a.push(this[i]);
u[this[i]] = 1;
}
return a;
}
jQuery(".counter").text(uniqueId.getUnique().length);
});

Adding and removing a class at the same time as updating a div

I am very new to JavaScript. I am trying to update a div, which works fine before the add and remove class pieces are added. The problem is when I add the class I can't seem to get it to be removed when the when the next image is clicked. I have used a remove class option, but it doesn't seem to want to work.
Any help is appreciated. Here is the code:
$('[class^="question"]').on('click', function(e) {
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('.question*').removeClass('question*selected');
$('#answer' + numb).show();
$('.question' + numb).addClass('question' + numb + 'selected');
});
Here is a link to the Fiddle I am Playing with.
Thanks.

You can keep track of your added class by defining a global variable. I created a working example in CODEPEN.
$(document).ready(function() {
var appliedClass = "container1";
var classNo = 1;
$(".buttonCon").click(function() {
if ($(".container").hasClass(appliedClass)) {
$(".container").removeClass(appliedClass);
classNo++;
if (classNo > 4) {classNo = 1;}
appliedClass = "container" + classNo;
$(".container").addClass(appliedClass);
}
});
});
I have appliedClass variable which keeps tracking of the latest added class. Every time you click on the button with .buttonCon class, this variable will be updated to the new added class. Next time, first we remove the former class. Then we added the new one. The second if statement might not be needed in your case, but in my example, I needed it to keep looping through container1 to container4 classes.

You've set yourself up with a really difficult-to-work-with class structure -- this can be a lot easier than you're making it. Give each of your "question" links the class 'question' and the unique id "question1", "question2", etc. Same for the answer nodes: class "answer" and id "answer1", "answer2" etc.
Now you can easily access all question links with $('.question') or all answers with $('.answer'), and can use the IDs to identify individual nodes as needed:
$('.question').on('click', function(e) {
e.preventDefault();
var numb = this.id.replace('question', '');
var answerNode = $('#answer'+numb);
if (answerNode.hasClass('hide')) {
// the Q they clicked on is not yet visible
$('.answer').addClass('hide'); // hide all answers
answerNode.removeClass('hide'); // show the desired one
} else {
// the Q they clicked on is already visible, so toggle it back off
answerNode.addClass('hide');
}
});
http://jsfiddle.net/647dadtj/

Check when a checkbox has its state changed on Javascript

I've created some checkboxes dynamically using JavaScript (below), any ideas on how to call a function when a checkbox is clicked (has its state changed)?
var eng_types = table[3].slice(3);
for(var i in eng_types) {
var name = eng_types[i];
// Create the necessary elements
var label = document.createElement("label");
var checkbox = document.createElement("input");
var description = document.createTextNode(name);
checkbox.type = "checkbox"; // Make the element a checkbox
checkbox.value = name; // Make its value "pair"
checkbox.name = i; // Give it a name we can check
label.appendChild(checkbox); // Add the box to the element
label.appendChild(description); // Add the description to the element
// Add the label element to your div
document.getElementById('eng_options').appendChild(label);
}
Any ideas on how to make each checkbox appear on a new line would also be appreciated.
Thanks in advance!

Using jQuery checkbox checked state changed event:
$("#i").change(function() {
if(this.checked) {
//Do stuff
}
});
Since you're adding the elements dynamically, a more robust solution might be to use this (thanks to #IgorAntun for mentioning bind and on):
$(document).on("change", "#i", function() {
if(this.checked) {
//Do stuff
}
});
To add context to the comments: The above examples previously used the selector $("[name='i']"), because I was treating checkbox.name = i like a string, instead of the variable that it was.
With regards to making each checkbox appear on a new line, you could <p></p> tags, <br /> tags, <div></div> tags-- really any tag that groups elements or has spacing. Additionally, you could use CSS. This method is my favorite, because it allows the spacing of the checkboxed to be adjusted, which you can't do with HTML tags.
input {
display: block;
margin-top: 2px;
}

You could also also use .bind('change', [...]) or .on('change', [...]), as an alternative to #IronFlare's answer. Examples:
Using .bind('change'):
$('#item-to-check').bind('change', function() {
if(this.checked) {
// Element is checked
} else {
// Element is not checked
}
});
Using .on('change'):
$('#item-to-check').on('change', function() {
if(this.checked) {
// Element is checked
} else {
// Element is not checked
}
});
Also, I recommend checking out Matt's answer on What is best way to perform jQuery .change().

How to toggle checkbox selection rather than only selecting?

I currently am using this JavaScript code snippet to select 3 checkboxes at a time
$(document).ready(function() {
var $cbs = $('input:checkbox[name="select[]"]'),
$links = $('a[name="check"]');
$links.click(function() {
var start = $links.index(this) * 3,
end = start + 3;
$cbs.slice(start,end).prop("checked",true);
});
});
Currently this code only selects the checkboxes, however I was wondering if anyone knew how to modify it so that it toggles the checkbox selection on and off?
Here's an example of my current code: "jsfiddle" - click the 1-3, 4-6 links etc to check the checkboxes.

Make the second argument to the prop("checked", ...) call depend on the "checked" status of the first (or other) checkbox in the slice:
// ...
$cbs.slice(start,end).prop("checked", !$cbs.slice(start).prop("checked"));
Here's an updated jsFiddle.
[Edit] Or to update each checkbox in the slice individually:
// ...
$cbs.slice(start,end).each(function() {
var $this = $(this);
$this.prop("checked", !$this.prop("checked"));
});
http://jsfiddle.net/ShZNF/3/

$cbs.slice(start,end).each(function() {
if ($(this).is(":checked")) {
$(this).removeProp("checked");
} else {
$(this).prop("checked",true);
}
});
http://jsfiddle.net/ShZNF/1/
Edit: Maeric's solution is better. I wasn't aware removeProp had this gotcha:
Note: Do not use this method to remove native properties such as
checked, disabled, or selected. This will remove the property
completely and, once removed, cannot be added again to element. Use
.prop() to set these properties to false instead.