I am working on a school assignment and we are starting to learn Jquery
I am looking to collect the values from a set of check boxes but only the ones that fall within the div that the button that triggers the function is contained within.
So far I have been able to get the values, but if any of the boxes are checked in the other divs those values are added as well because they need to all share the same name. I am trying to avoid duplicating code.
This is my Jquery code:
$(document).ready(function() {
$('button').on('click', function() {
var destination = $(this).closest('.destinations'); //this selects the div the button is in but I can't figure out how to apply it to the checkbox value gathering
var base_price = $(destination).find('.base_price').text();
var add_ons = [];
$.each($("input[name='add_on']:checked"), function(){ //I player around with using the variable destination somewhere here but am thinking there needs to be another step
add_ons.push($(this).val());
});
$(this).remove();
console.log(base_price)
console.dir(add_ons) //the values are successfully added but I can't figure out how to isolate based on the the variable 'destination'
});
});
HTML
<div class = "destinations">
<h2>New York, New York</h2>
<img src="images/newyork.jpeg">
<p>
Includes: 5 Night Hotel Stay, Central Park Tours, and New York Skyscrapers Package<br>
Starting at $<span class="base_price">1299.99</span>
</p>
<div>
<h3>Add-Ons</h3>
<input type="checkbox" id="option1" name="add_on" value="1000">
<label for="option1"> Add Two-Night Stay at the Ritz</label><br>
<input type="checkbox" id="option2" name="add_on" value="200">
<label for="option2"> Broadway Show</label><br>
<input type="checkbox" id="option3" name="add_on" value="400">
<label for="option3"> New York Steakhouse Gourmet Night Out</label><br>
</div>
<div>
<button id = "nyny">Get price</button>
</div>
</div>
<div class="destinations">
<h2>Paris, France</h2>
<img src="images/eiffel_tower.jpeg">
<p>
Includes: 5 Night Hotel Stay, 3 Museum Package, and Taste of France Tour<br>
Starting at $<span class="base_price">1699.99</span>
</p>
<div>
<h3>Add-Ons</h3>
<input type="checkbox" id="option1" name="add_on" value="1000">
<label for="option1"> 3 day Vineyards and Flowers Tour</label><br>
<input type="checkbox" id="option2" name="add_on" value="200">
<label for="option2"> Visit the Eiffel Tower</label><br>
<input type="checkbox" id="option3" name="add_on" value="400">
<label for="option3"> Meet President Macron</label><br>
</div>
<button id = "paris">Get Price</button>
</div>
<div class = "destinations">
<h2>Tokyo, Japan</h2>
<img src="images/tokyo.jpeg">
<p>
Includes: 5 Night Hotel Stay, Build a Pokemon Event, and a Bonsai Class<br>
Starting at $<span class="base_price">1199.99</span>
</p>
<div>
<h3>Add-Ons</h3>
<input type="checkbox" id="option1" name="add_on" value="1000">
<label for="option1"> Wagyu Steak Dinner at Aragawa</label><br>
<input type="checkbox" id="option2" name="add_on" value="200">
<label for="option2"> Random Japanese Game Show Night!</label><br>
<input type="checkbox" id="option3" name="add_on" value="400">
<label for="option3"> Mount Fuji Adventure</label><br>
</div>
<button id = "japan">Get Price</button>
</div>
Any assistance will be greatly appreciated
You should only select checkbox within that parent div.
$(document).ready(function() {
$('button').on('click', function() {
var destination = $(this).closest('.destinations'); // selecting the div container
var base_price = $(destination).find('.base_price').text();
var add_ons = [];
//$(destination) selects the parent div and find() function finds checkbox within that div.
$(destination).find("input[name='add_on']:checked")).each(function(){
add_ons.push($(this).val());
});
$(this).remove();
console.log(base_price)
console.dir(add_ons);
});
});
Related
I made a simple program that generates a random build for an NBA 2k21 MyPlayer for one of my classes. Every button the user clicks generates a random value for each trait.
I am now trying to alter the program to remember the user input for the height radio buttons and then generate a random position based on that user's selection.
I want the program to randomize between:
PG/SG if the height is between 6'2" and 6'5" or
SG/SF if the height is between 6'5" and 6'8" or
SF/PF if the height is between 6'8" and 6'10" or
PF/C if the height is between 6'10 and 6'11"
Originally the program was just 3 buttons that generates random values from an array, but now it consists of 3 buttons and a user selection of radio buttons. Here is what I had before I got stuck:
<h1>
2k Archetype Generator
</h1>
<p>
Choose Height
</p>
<form>
<input name="height" type="radio" id="h1"> 6'2"
<br>
<input name="height" type="radio" id="h2"> 6'3"
<br>
<input name="height" type="radio" id="h3"> 6'4"
<br>
<input name="height" type="radio" id="h4"> 6'5"
<br>
<input name="height" type="radio" id="h5"> 6'6"
<br>
<input name="height" type="radio" id="h6"> 6'7"
<br>
<input name="height" type="radio" id="h7"> 6'8"
<br>
<input name="height" type="radio" id="h8"> 6'9"
<br>
<input name="height" type="radio" id="h9"> 6'10"
<br>
<input name="height" type="radio" id="h10"> 6'11"
<br>
</form>
<br>
<button id="positionchoice" onclick="randpos()">
Position
</button>
<p id="pos">
</p>
<button id="primary" onclick="randprim()">
Primary
</button>
<p id="no1">
</p>
<button id="secondary" onclick="randsecond()">
Secondary
</button>
<p id="no2">
</p>
var p = document.getElementById("pos");
var skill1 = document.getElementById("no1");
var skill2 = document.getElementById("no2");
var height = ["6'2","6'3","6'4","6'5","6'6","6'7"
,"6'8","6'9","6'10","6'11"];
var primary = ["Shot Creating", "Playmaking", "Defensive"
,"Sharpshooting","3-Point","Rebounding"];
var secondary = ["Slasher", "Finisher", "Shooter",
"Ball Handler","Lockdown", "Two-Way"];
var arr = ["PG", "SG", "SF", "PF", "C"];
function randpos() {
}
function randprim() {
skill1.innerHTML = primary[Math.floor(Math.random()*primary.length)];
}
function randsecond() {
skill2.innerHTML = secondary[Math.floor(Math.random() * secondary.length)];
}
Hopefully this will help get you unstuck so that you can write the next part of your function. Here is how you can get the currently selected option:
function randpos() {
let height = document.querySelector("input[name='height']:checked").value;
height = parseInt(height);
}
<h1>
2k Archetype Generator
</h1>
<p>
Choose Height
</p>
<form>
<input name="height" type="radio" id="h1" value="74"> 6'2"
<br>
<input name="height" type="radio" id="h2" value="75"> 6'3"
<br>
<input name="height" type="radio" id="h3" value="76"> 6'4"
<br>
<input name="height" type="radio" id="h4" value="77"> 6'5"
<br>
<input name="height" type="radio" id="h5" value="78"> 6'6"
<br>
<input name="height" type="radio" id="h6" value="79"> 6'7"
<br>
<input name="height" type="radio" id="h7" value="80"> 6'8"
<br>
<input name="height" type="radio" id="h8" value="81"> 6'9"
<br>
<input name="height" type="radio" id="h9" value="82"> 6'10"
<br>
<input name="height" type="radio" id="h10" value="83"> 6'11"
<br>
</form>
<br>
<button id="positionchoice" onclick="randpos()">
Position
</button>
I have edited your <input/> elements to include a value attribute so that you can then select that directly from the JS. Additionally you may notice that these values are in inches only. You can make these values in feet and inches, like are still displayed to the user, but it is likely going to make your life easier implementing the next part of your function if you have a single number you can make comparisons with.
In the JavaScript since your button is not attached to a form you want to set up a query selector looking for any <input/> element with a name set to height. To get only the currently selected element we then look for the :checked pseudo-class selector. Finally we get the value of the element that is returned and assign it to a height variable. (Alternatively you can attach your button to the form if you give the form a name which then would allow you to process it in a more typical fashion)
Since you are likely going to want to make comparisons with this value you can then take the height variable, a string, and convert it to a number using the parseInt() function.
I am relatively new to jQuery. I am trying to create a survey; in the survey each question in in its own div and is revealed by clicking the "Next" button. I just have all divs hidden except for the current div. I'm trying to write the answers to an object as I go to simplify the code. There are questions answered with radio buttons, some text areas, some check boxes, and some selects. Here is my code:
$('.next-button').click(function() {
if ($(this).parent().has('.survey-question-option')) {
replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
} else if ($(this).parent().has("textarea")) {
replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
}
console.log(replies);
$(this).parent().attr('hidden', '');
$(this).parent().next().removeAttr('hidden');
});
I'm logging the Object (replies) to make sure things are working. As the code is currently formulated I get the answers to the first two questions (both of which are radio buttons) added to replies, but the next two objects (textareas) populate as undefined. ({reason: "bill", wish: "newstart", dislike: undefined, like: undefined}). I tried formulating the if statement as two separate statements:
if ($(this).parent().has('.survey-question-option')) {
replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
};
if ($(this).parent().has("textarea")) {
replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
};
That returns undefined for the radio buttons, but the contents of the two textareas shows up in the object. ({reason: undefined, wish: undefined, dislike: "dislike text", like: "like text"}). In doing some testing on my own I've determined that if the if statement is formulates as if...else if the formula always applies the if statement only, but if it is created with two if statements it skips thew first and goes straight for the second.
My logic is that each Next button is in a div with the responses, so I should be able to look at the parent of the Next button, find the appropriate class, and get the value. And it seems to only work 50% of the time no matter how I formulate it.
EDIT: I am attaching the relevant html sections.
$('.next-button').click(function() {
if ($(this).parent().has('.survey-question-option')) {
replies[$(this).parent().attr('id')] = $(this).parent().contents('.survey-question-option:checked').val();
} else if ($(this).parent().has("textarea")) {
replies[$(this).parent().attr('id')] = $(this).parent().contents("textarea").val();
}
console.log(replies);
$(this).parent().attr('hidden', '');
$(this).parent().next().removeAttr('hidden');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="survey">
<div id="reason" class='radio'>
<p class="survey-question">What is the primary reason you visit the site? </p>
<input type="radio" id="bill" name="reason" class="survey-question-option" value="bill">
<label for="bill" class="survey-question-option-label">To view or pay my bill online</label><br>
<input type="radio" id="outage" name="reason" class="survey-question-option" value="outage">
<label for="outage" class="survey-question-option-label">To view or report an outage</label><br>
<input type="radio" id="start" name="reason" class="survey-question-option" value="start">
<label for="start" class="survey-question-option-label">To get information about starting or stopping services</label><br>
<input type="radio" id="hours" name="reason" class="survey-question-option" value="hours">
<label for="hours" class="survey-question-option-label">To find Frederick Waster's business hours</label><br>
<input type="radio" id="board" name="reason" class="survey-question-option" value="board">
<label for="board" class="survey-question-option-label">To get information about Frederick Water's governance or board meetings</label><br>
<input type="radio" id="devel" name="reason" class="survey-question-option" value="devel">
<label for="devel" class="survey-question-option-label">To get information about new water or wastewater lines for new development</label><br>
<input type="radio" id="other" name="reason" class="survey-question-option" value="other">
<label for="other" class="survey-question-option-label">Other</label><br>
<div id="other-fill-reason" class="other-fill" hidden>
<label for="othertext-reason" class="survey-question-option-label">Please specify: </label>
<input type="text" class="survey-question-other" id="othertext-reason">
</div>
<input type="button" class="next-button" id="reason-next" value="Next">
</div>
<div id="wish" class='radio' hidden>
<p class="survey-question">What do you wish the site did better?</p>
<input type="radio" id="newstart" name="wish" class="survey-question-option" value="newstart">
<label for="newstart" class="survey-question-option-label">Allow me to pay deposit while starting new service</label><br>
<input type="radio" id="outinfo" name="wish" class="survey-question-option" value="outinfo">
<label for="outinfo" class="survey-question-option-label">Provide easier-to-find information about outages</label><br>
<input type="radio" id="startstop" name="wish" class="survey-question-option" value="startstop">
<label for="startstop" class="survey-question-option-label">Make it easier to start and stop services</label><br>
<input type="radio" id="request" name="wish" class="survey-question-option" value="request">
<label for="request" class="survey-question-option-label">Make it easier to request maintenance for existing service</label><br>
<input type="radio" id="chat" name="wish" class="survey-question-option" value="chat">
<label for="chat" class="survey-question-option-label">Let me talk to customer service online</label><br>
<input type="radio" id="other2" name="wish" class="survey-question-option" value="other">
<label for="other2" class="survey-question-option-label">Other</label><br>
<div id="other-fill-wish" class="other-fill" hidden>
<label for="othertext-wish" class="survey-question-option-label">Please specify: </label>
<input type="text" class="survey-question-other" id="othertext-wish">
</div>
<input type="button" class="next-button" id="wish-next" value="Next">
</div>
<div id="dislike" class="textbox" hidden>
<p class="survey-question">What do you dislike about the site?</p>
<textarea id="dislike-text" class="like-dislike" cols="100" rows="5" maxlength="500" wrap="soft"></textarea><br>
<input type="button" class="next-button" id="dislike-next" value="Next">
</div>
<div id="like" class="textbox" hidden>
<p class="survey-question">What do you like about the site?</p>
<textarea id="like-text" class="like-dislike" cols="100" rows="5" maxlength="500" wrap="soft"></textarea><br>
<input type="button" class="next-button" id="like-next" value="Next">
</div>
has() doesn't return a boolean, it returns a jQuery object. Objects are always truthy.
If you want to test whether a selector finds anything, test the length of the result.
$('.next-button').click(function() {
if ($(this).parent().find('.survey-question-option').length > 0) {
replies[$(this).parent().attr('id')] = $(this).parent().find('.survey-question-option:checked').val();
} else if ($(this).parent().find("textarea").length > 0) {
replies[$(this).parent().attr('id')] = $(this).parent().find("textarea").val();
}
console.log(replies);
$(this).parent().attr('hidden', '');
$(this).parent().next().removeAttr('hidden');
});
So I have created a from and i want to present the selected choices by the user to be displayed in an ordered list, when they push the submit button. I have tried everything i could find and the result i get for all three variables "info" is undefined. I would be happy if you could help me with this Thank you.
The following is te code written for the forms.
<form id="music">
<div id="m">
<p>What is your favourite genre of music?</p>
<input type="radio" name="genre" value="Pop" id="Pop" checked> <label for ="Pop"> Pop </label>
<input type="radio" name="genre" id="Rock" > <label for ="Rock"> Rock </label>
<input type="radio" name="genre" id="Classical"> <label for ="Classical"> Classical </label>
<input type="radio" name="genre" id="Rap/HipHop" > <label for ="Rap/HipHop"> Rap/HipHop </label>
<input type="radio" name="genre" id="Electronic" > <label for ="Electronic"> Electronic </label>
<input type="radio" name="genre" id="Country" > <label for ="Country"> Country </label>
<input type="radio" name="genre" id="Other" > <label for ="Other"> Other </label>
<input type="radio" name="genre" id="don't listen to music" > <label for ="don't listen to music"> I don't listen to music! (WUT??) </label>
</div>
</br>
</br>
How do you usually commute to UVic?
<div id="t">
<form id="trans">
<select name="commute">
<option value="Bus"> Bus </option>
<option value="Drive"> Drive </option>
<option value="Bike"> Bike </option>
<option value="Walk"> Walk </option>
<option value="Crawl"> Crawl -__- </option>
<option value="Fly"> Fly?!! </option>
</select>
</div>
</br>
<div id="p">
<form id="pasta">
What is your favourite type of sauce on pasta?
<input type="text" name="sauce" value="Sauce boss">
</div>
</br>
<button type="button" onclick="result()"> Submit </button>
<button type="reset" value="Reset">Reset</button>
<ol id="myResult"> </ol>
The following is the javascript written for the function "result()", which is suppose to work when the submit button is pushed.
function result() {
var info = new Array();
info[0] = document.getElementById("m").value;
info[1] = document.getElementById("t").value;
info[2] = document.getElementById("p").value;
info.sort();
var mySubmit = document.getElementById("myResult");
var y = " ";
for (var i=0; i<info.length; i++)
{
var x = info[i];
y = y + "<ol>" + x + "</ol>";
}
mySubmit.innerHTML = y;
}
In fact, there are some problems in your codes. I have corrected some, and here is the jsfiddle working as you wish.
You shouldn't get the value of a div, a div element has NOT value attribute. This is the main problem of your codes. Besides, your don't have to separate the form, all the inputs can include in one form.
Also I add JQuery for getting the job easier, for example, to get the value of the radio button :
info[0] = $('input[name="genre"]:checked').val();
I'm not gonna solve this for you as you simply will not learn for yourself so here's the issues:
No need for multiple forms
You haven't closed any forms (not that you need more than one) although it's not the cause of the errors.
In your javascript you're trying to get the value of a division. <div> is not a form field/element so it doesn't have a value. Hence undefined as the result.
My recommendation, check some basic tutorials on HTML forms and understand them properly. Check some examples. Otherwise you've pretty much got the right idea with your javascript except that you're trying to get data values from elements that don't have any values.
I hope this helps
I'm making one web site, and I'm stuck. I have 6 checkboxes:
<div class="checkbox">
<label>
<input type="checkbox" value="Pizza" id="pizza">
Pizza
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="BBQ" id="bbq">
BBQ
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Chicken" id="chicken">
Chicken
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Pasta" id="pasta">
Pasta
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Chinese" id="chinese">
Chinese
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Mexican" id="mexican">
Mexican
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="Indian" id="indian">
Indian
</label>
</div>
</div>
<div class="col-xs-7">
<div class = "restaurant" id="Paradiso">
</div>
</div>
<div class="col-xs-7">
<div class = "restaurant" id="Wingsy">
</div>
</div>
And a lot more of restaurant class div's.
So, I want to make: when checkbox are cheked they search trough restaurants and if that restourant have property that is in checkbox, it shows. Otherwise it hides.
Example:
var typeOfKitchen = ['pizza','bbq','chicken','pasta','chinese','mexican','indian'];
var restaurants = new Array();
restaurant = new Object();
restaurant.[name] = "Paradiso";
restaurant.[type] = typeOfKitchen[0];
restaurants.push(restaurant);
restaurant = new Object();
restaurant.[name] = "Wingsy";
restaurant.[type] = typeOfKitchen[2];
restaurants.push(restaurant);
And then I'm stuck with code to take value of checkbox and search trough restaurants and shows only restaurants who have that property, and hide others that dont have.
Firstly, it is good practise to use jsFiddle to show your code.
Look this fiddle: http://jsfiddle.net/EtJ6L/5/
I had restructured your code a bit, added some css and js.
New HTML code:
<div class="checkbox">
<input type="checkbox" value="Pizza" id="pizza" />
<label>Pizza</label>
</div>
<div class="checkbox">
<input type="checkbox" value="BBQ" id="bbq" />
<label>BBQ</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Chicken" id="chicken" />
<label>Chicken</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Pasta" id="pasta" />
<label>Pasta</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Chinese" id="chinese" />
<label>Chinese</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Mexican" id="mexican" />
<label>Mexican</label>
</div>
<div class="checkbox">
<input type="checkbox" value="Indian" id="indian" />
<label>Indian</label>
</div>
<div class="col-xs-7">
<div class="restaurant" id="pizza">Paradiso</div>
</div>
<div class="col-xs-7">
<div class="restaurant" id="bbq">Wingsy</div>
</div>
Added CSS:
.restaurant {
display: none;
}
Added jQuery:
$(":checkbox").change(function () {
var id = $(this).attr('id');
$(".restaurant#" + id).toggle(this.checked);
});
How it works?
Notice, that I changed block with info about restraunts. Now name of restraunt (and other info will be there too) is inner html of div. Also, to achieve what you want you have to connect restraunt blocks with inputs.
Look this block html, for example:
<div class="col-xs-7">
<div class="restaurant" id="bbq">Wingsy</div>
</div>
Firstly, name is inner hmtl. Also, I added type of restraunt into id attribute of this div.
Look this input html (connected with restraunt):
<div class="checkbox">
<input type="checkbox" value="BBQ" id="bbq" />
<label>BBQ</label>
</div>
Firstly, I restrucutred it a bit. Now it is more valid, than was. Also, notice id attribute of this input. So input and divs are connected now.
Divs with restraunt's info are hidden from start. It is achieved by css code display: none.
Now take a look on jQuery code.
$(":checkbox").change(function () {
var id = $(this).attr('id');
$(".restaurant#" + id).toggle(this.checked);
});
We handling change action on all checkbox elements on page. We save id of checkbox was clicked on. After that we toggle .restraunt#xxx element, where xxx is id of this element. Div's and input's are connected, so this approach will work. Toggle displays or hide element. Read here about it.
Hope this will help you.
Note I think better approach is to make ajax request to the server depending on checkbox checked, then cache and output ajax response.
If you have situation, that restraunt can have more then 1 kitchen As I said earlier better way is to use ajax request. You will send some parameters like bbq=true&pizza=true, server will handle this query and will return some response, depending on query. I had written an example for you. Look this fiddle: http://jsfiddle.net/EtJ6L/8/.
On checkbox click ajax request sending to script bob.php, for example. Look, what data is sending with it. On bob.php you will handle this query. Something like $pizza = $_POST['pizza']; if($pizza != "") { // add something to sql query } etc.
(I was unsure what title to use so i took what i felt described it if it doesnt fit please tell me/change it)
So i've been making this league of legends site for a while now and ran into a trouble.
I've been making a Filter menu that filters the "Champions"(Hero's) to only show those with the correct role/ability.
So i got an on-click script on checkboxes that should show the correct Champions when clicked on. but it doesnt seem to work.
When i uncheck the textbox it correctly takes back all of the champions, but when i "Check" it all champions disappears (should do this) but it doesnt show those wich apply to the filter. (I got all the correct id's on the DIV's, i know this since i have a search bar that works for filtering aswell but i want checkboxes for it since its simpler)
Checkboxes:
AD<input type="checkbox" name="adcarry" value="adcarry" id="check1" class="check1" onclick="boxchanged()">
AP<input type="checkbox" name="apcarry" value="apcarry" id="check2" class="check2" onclick="boxchanged()">
Carry<input type="checkbox" name="carry" value="carry" id="check3" class="check3" onclick="boxchanged()">
Tank<input type="checkbox" name="tank" value="tank" id="check4" class="check4" onclick="boxchanged()">
Support<input type="checkbox" name="support" value="support" id="check5" class="check5" onclick="boxchanged()">
Jungler<input type="checkbox" name="jungler" value="jungler" id="check6" class="check6" onclick="boxchanged()">
Burst<input type="checkbox" name="burst" value="burst" id="check7" class="check7" onclick="boxchanged()">
<button type="button" onclick="boxchanged()">Reset</button>
Affected divs are designed as following: (The classes changes depending on what the champion can do)
<div class="champion apcarry mid" id="ahri" onclick="OnClickChampion(this.id)"><img src="img/champions/ahri.jpg"> Ahri </div>
Script:
function boxchanged ( )
{
$("#num1").val("Search..");
if ($("[type='checkbox']:checked").length == 0)
{
$(".champion").show(200);
}
else
{
$(".champion").hide(200);
for (var i = 1;i < 7; i++)
{
var name = "check"+i;
console.log(name)
var name2 = document.getElementById(name);
console.log(name2)
if (name2.checked == true)
{
var name3 = name2.name;
$("."+name3).show();
}
}
}
};
You should stop any animation
$("."+name3).stop().show();
Here is your code much simplified
DEMO
$(function() {
$(".champion").on("click",function() {
// put OnClickChampion here
});
$(".check").on("click",function() {
$("#num1").val("Search..");
var checked = $("[type='checkbox']:checked");
console.log(checked.length);
if (checked.length == 0) {
$(".champion").stop().show(200);
}
else {
$(".champion").hide(200);
checked.each(function() {
var klass = $(this).val();
$("."+klass).stop().show(200);
});
}
});
});
using
<form>
<label for="check1">AD</label>
<input type="checkbox" value="adcarry" id="check1" class="check"/>
<label for="check2">AP</label>
<input type="checkbox" value="apcarry" id="check2" class="check"/>
<label for="check3">Carry</label>
<input type="checkbox" value="carry" id="check3" class="check"/>
<label for="check4">Tank</label>
<input type="checkbox"value="tank" id="check4" class="check"/>
<label for="check5">Support</label>
<input type="checkbox" value="support" id="check5" class="check"/>
<label for="check6">Jungler</label>
<input type="checkbox" value="jungler" id="check6" class="check"/>
<label for="check7">Burst</label>
<input type="checkbox" value="burst" id="check7" class="check"/>
<button type="reset" class="check">Reset</button>
</form>
<div class="champion apcarry mid" id="ahri"><img src="img/champions/ahri.jpg"> Ahri </div>
To show only the ones with more than one class
var klasses=[]
checked.each(function() {
klasses.push("."+$(this).val())
});
$(".champion").not(klasses.join(",")).stop().hide(200);