Develop Reference

Multi-checkbox filter with AND relationship results

I am using the frameworks below for building out a multi-checkbox filter on my website. This code filters results based on an OR relationship (if has "option1" value OR "option2" value, etc. I want it to function as an AND relationship, so the only results that show would be ones that have values in all of the values selected.
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
// create a collection containing all of the filterable elements
var $filteredResults = $('.flower');
// loop over the selected filter name -> (array) values pairs
$.each(selectedFilters, function(name, filterValues) {
// filter each .flower element
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
// loop over each category value in the current .flower's data-category
$.each(currentFilterValues, function(_, currentFilterValue) {
// if the current category exists in the selected filters array
// set matched to true, and stop looping. as we're ORing in each
// set of filters, we only need to match once
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
// if matched is true the current .flower element is returned
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
body {
font-family:'Arial';
color:#646464;
}
.continents-wrap {
float:left;
width:20%;
margin:0 5% 0 0;
padding:0;
}
.flowers-wrap {
float:left;
width:20%;
margin:0 5% 0 0;
padding:0;
position:relative;
}
.flowers {
float:left;
width:50%;
}
.flowers div {
float:left;
width:90%;
height:68px;
line-height:68px;
padding:0 5%;
background:#eee;
margin:0 0 1px;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="flowers-wrap">
<p><strong>Filter flowers by colour:</strong></p>
<form>
<label><input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label><br>
<label><input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label><br>
<label><input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label><br>
<label><input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label><br>
<label><input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label><br>
<label><input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label>
</form>
<p><strong>Filter flowers by size:</strong></p>
<form>
<label><input type="checkbox" name="fl-size" value="tiny" id="tiny" /> Tiny</label><br>
<label><input type="checkbox" name="fl-size" value="small" id="small" /> Small</label><br>
<label><input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label><br>
<label><input type="checkbox" name="fl-size" value="large" id="large" /> Large</label><br>
<label><input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label>
</form>
<p><strong>Filter flowers by continents:</strong></p>
<form>
<div><input type="checkbox" name="fl-cont" value="africa" id="africa" /> Africa </div>
<div><input type="checkbox" name="fl-cont" value="europe" id="europe" />
Europe</div>
<div><input type="checkbox" name="fl-cont" value="asia" id="asia" />
Asia</div>
<div><input type="checkbox" name="fl-cont" value="north-america" id="north-america" />
North America</div>
<div><input type="checkbox" name="fl-cont" value="south-america" id="south-america" />
South America </div>
<label><input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" />
Antarctica</label>
<div><input type="checkbox" name="fl-cont" value="australasia" id="australasia" />
Australasia</div>
</form>
</div>
<div class="flowers">
<div class="flower" data-id="aloe" data-category="green small medium africa">Aloe</div>
<div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div>
<div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div>
<div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div>
<div class="flower" data-id="hemp" data-category="green large asia">Hemp</div>
<div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div>
<div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div>
<div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div>
<div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div>
<div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div>
<div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div>
<div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div>
<div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div>
<div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div>
</div>
There is this reference in the original notes:
// if the current category exists in the selected filters array
// set matched to true, and stop looping. as we're ORing in each
// set of filters, we only need to match once
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
Though I don't know how to take this information and change it to AND instead of OR.
Anyone have any tips?

Add class to DIV element when quiz answer is correct or incorrect

I am trying to add a CSS class to a JavaScript created element, but am experiencing a reference error for the trackerMarker element. The tracker-marker DIVs are displaying on load, but are undefined when used in conjunction with the event listener.
I have tried using the createElement function inside and outside of the for loop.
I am not sure where the issue is. I am learning JS as I go, so any tips or suggestions are greatly appreciated.
function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();
.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}
<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

You never set trackerMarker inside runQuiz.
I used getElementsByClassName (because how you wrote your code) which will return an array of items which is not ideal. You should add an ID to your trackerMarker div and then use getElementById.
function answerTracker() {
const answerTracker = document.querySelector(".tracker");
let questions = document.querySelectorAll(".container");
for (let i = 0; i < questions.length; i++) {
let trackerMarker = document.createElement("div");
trackerMarker.className = "tracker-marker";
answerTracker.appendChild(trackerMarker);
}
}
const runQuiz = (() => {
// Generate tracker
answerTracker();
let answers = document.querySelectorAll(".radio");
answers.forEach(function(answer) {
answer.addEventListener("click", (e) => {
let target = e.target;
let container = target.closest(".container");
let question = container.querySelector(".question");
let next = container.querySelector("button");
let trackerMarker = document.getElementsByClassName('tracker-marker')[0];
// ^-- I added this line only
if (e.target.value == "t") {
trackerMarker.classList.add("correct");
} else {
trackerMarker.classList.add("incorrect");
}
if (next !== null && next !== "") {
next.style.display = "block";
}
question.style.display = "none";
});
});
})();
.tracker {
display: flex;
padding: 50px 0;
}
.tracker .tracker-marker {
width: 28px;
height: 28px;
margin: 0 1.25rem;
background-color: red;
border-radius: 100%;
}
.tracker .tracker-marker.correct {
background-color: blue;
}
.question {
margin-bottom: 18px;
}
.question .question__label {
margin-bottom: 8px;
}
<div class="tracker">
</div>
<fieldset class="container">
<div class="question">
<div class="question__label">
<span class="question-marker">1</span>
<label class="formControlLabel">Question One</label>
</div>
<input type="radio" name="form[question-one]" value="t" id="question-one0" class="radio">
<label for="question-one0">Answer A</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one1" class="radio">
<label for="question-one1">Answer B</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one2" class="radio">
<label for="question-one2">Answer C</label>
<br>
<input type="radio" name="form[question-one]" value="f" id="question-one3" class="radio">
<label for="question-one3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">2</span>
<label class="formControlLabel">Question Two</label>
</div>
<input type="radio" name="form[question-two]" value="t" id="question-two0" class="radio">
<label for="question-two0">Answer A</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two1" class="radio">
<label for="question-two1">Answer B</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two2" class="radio">
<label for="question-two2">Answer C</label>
<br>
<input type="radio" name="form[question-two]" value="f" id="question-two3" class="radio">
<label for="question-two3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>
<fieldset class="container" style="display: none;">
<div class="question">
<div class="question__label">
<span class="question-marker">3</span>
<label class="formControlLabel">Question Three</label>
</div>
<input type="radio" name="form[question-three]" value="t" id="question-three0" class="radio">
<label for="question-three0">Answer A</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three1" class="radio">
<label for="question-three1">Answer B</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three2" class="radio">
<label for="question-three2">Answer C</label>
<br>
<input type="radio" name="form[question-three]" value="f" id="question-three3" class="radio">
<label for="question-three3">Answer D</label>
<button type="button" style="display: none;">Next</button>
</div>
</fieldset>

Unable to submit the form successfully using Javascript

Here is a code for Quiz app using HTML,CSS and JavaScript. You are given with a few questions and you need to choose one of the options from each question then click submit. The total score secured should be shown in the "You have scored ____ marks". However,there is no change in score when I click submit.
Here is the code for both HTML,CSS and Javascript. Please correct the code and let me know where I did wrong.
<!DOCTYPE html>
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header{
text-align: center;
color:red;
margin-top:100px;
font-size: 100px;
}
.main{
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li{
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1{
border:2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color:red;
}
.span{
font-size: 50px;
color:salmon;
border:2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br>
<div class="main">
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br>
<input type='radio' name='Q1' id='Option-1'value='Option 1' >
<label style="color:white;" for="Option-1">Option 1</label><br>
<br>
<input type='radio' name='Q1' id='Option-2' value='Option 2'>
<label style="color:white;" for="Option-2">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br>
<input type='radio' name='Q2' id='Option-3'value='Option 1' >
<label style="color:white;" for="Option-3">Option 1</label><br>
<br>
<input type='radio' name='Q2' id='Option-4' value='Option 2'>
<label style="color:white;" for="Option-4">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br>
<input type='radio' name='Q3' id='Option-5' value='Option 1'>
<label style="color:white;" for="Option-5">Option 1</label><br>
<br>
<input type='radio' name='Q3' id='Option-6'value='Option 2'>
<label style="color:white;" for="Option-6">Option 2</label><br>
<br>
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br>
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br>
<input type='radio' name='Q4' id='Option-7' value='Option 1'>
<label style="color:white;" for="Option-7">Option 1</label><br>
<br>
<input type='radio' name='Q4' id='Option-8' value='Option 2'>
<label style="color:white;" for="Option-8">Option 2</label><br>
<br> <br><br>
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;">
</div>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1" >Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script src="Quiz.js"></script>
</body>
</html>
Javascript :-
const correctAnswers=['Option 1','Option 2','Option 2','Option 1'];
const form = document.querySelector(".quiz-form");
let score=0;
form.addEventListener('submit',()=>{
form.preventDefault();
const userAnswers=[form.Q1.value,form.Q2.value,form.Q3.value,form.Q4.value];
userAnswers.forEach((answer,index)=>{
if(answer==correctAnswers[index]){
score+=20;
}
console.log(score);
});
const result=document.querySelector(".result")
result.querySelector("span").textContent= '${score}';
});

You need a form element, just wrap the whole quiz in one.
Problem #2, preventDefault() is an event function not a element one, something like this:
form.addEventListener('submit', e => {
e.preventDefault();
// more things .....
});
Finally, you're not interpolating score correctly, use back-ticks, i.e.:
result.querySelector('span').textContent = `${score}`;
Here's a working example with the changes I suggested:
<html>
<head>
<title>Quiz Game</title>
</head>
<body>
<style>
.header {
text-align: center;
color: red;
margin-top: 100px;
font-size: 100px;
}
.main {
border: solid 1px blue;
background-color: blue;
}
/* .options{
padding-left: 10px;
} */
.options li {
list-style-type: circle;
/* padding-left: 10px; */
font-size: 20px;
}
.result1 {
border: 2px solid black;
margin-left: 500px;
margin-right: 500px;
background-color: grey;
font-size: 20px;
color: red;
}
.span {
font-size: 50px;
color: salmon;
border: 2px solid orangered;
}
</style>
<h1 class="header">QUIZ</h1>
<br />
<div class="main">
<form>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 1</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">1) First Question</p>
<br />
<input type="radio" name="Q1" id="Option-1" value="Option 1" />
<label style="color:white;" for="Option-1">Option 1</label><br />
<br />
<input type="radio" name="Q1" id="Option-2" value="Option 2" />
<label style="color:white;" for="Option-2">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 2</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">2) Second Question</p>
<br />
<input type="radio" name="Q2" id="Option-3" value="Option 1" />
<label style="color:white;" for="Option-3">Option 1</label><br />
<br />
<input type="radio" name="Q2" id="Option-4" value="Option 2" />
<label style="color:white;" for="Option-4">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 3</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">3) Third Question</p>
<br />
<input type="radio" name="Q3" id="Option-5" value="Option 1" />
<label style="color:white;" for="Option-5">Option 1</label><br />
<br />
<input type="radio" name="Q3" id="Option-6" value="Option 2" />
<label style="color:white;" for="Option-6">Option 2</label><br />
<br />
</div>
<div class="quiz-form">
<h3 style="color:white;padding-left:50px">Question 4</h3>
<br />
<p style="color:white;padding-left: 10px;font-size: 20px;">4) Fourth Question</p>
<br />
<input type="radio" name="Q4" id="Option-7" value="Option 1" />
<label style="color:white;" for="Option-7">Option 1</label><br />
<br />
<input type="radio" name="Q4" id="Option-8" value="Option 2" />
<label style="color:white;" for="Option-8">Option 2</label><br />
<br />
<br /><br />
</div>
<div style="text-align:center">
<input type="submit" value="Submit" style="font-size:20px;" id="submit_button" />
</div>
</form>
</div>
<div class="result" style="text-align: center;">
<h1 class="result1">Warning!! Clicking Submit will display the Result</h1>
<p style="font-size: 40px;color:green;">You have scored <span class="span"> 0% </span></p>
</div>
<script>
const correctAnswers = ['Option 1', 'Option 2', 'Option 2', 'Option 1'];
const form = document.querySelector('form');
let score = 0;
form.addEventListener('submit', e => {
e.preventDefault();
const userAnswers = [form.Q1.value, form.Q2.value, form.Q3.value, form.Q4.value];
userAnswers.forEach((answer, index) => {
if (answer == correctAnswers[index]) {
score += 20;
}
console.log(score);
});
const result = document.querySelector('.result');
result.querySelector('span').textContent = `${score}`;
});
</script>
</body>
</html>

jQuery not reacting to number input

I have this code, where if I fill in specific input fields then it will 'enable' or in this case remove a class but when it comes to filling in an input field of a number it won't react to the input value of the number what is filled. I want it to when something is filled in then enable the button.
I'm setting up a validation that when not all the fields are filled in, you can't go to the next page but before that you need to fill in all the fields.
HTML
<input id="LAMINAAT" type="radio" name="group1" onclick="myFunction()"
value="Laminaat" />
<label for="LAMINAAT">Laminaat</label>
<input id="PARKET" type="radio" name="group1" onclick="myFunction()" value="Parket" />
<label for="PARKET">Parket</label>
<input id="PVC" type="radio" name="group1" onclick="myFunction()" value="Pvc" />
<label for="PVC">PVC</label>
<hr>
<input id="JA2" type="radio" name="group3" value="Ja">
<label for="JA2" class="form-field__radio__label">Ja, meerprijs €1.50 per m<sup>2</sup></label><br>
<input id="NEE2" type="radio" name="group3" onclick="JaNeeFirst()" value="Nee">
<label for="NEE2">Nee</label>
<div id="form_JA2" class="desc desc3" style="float: inherit;">
<h5>Hoeveel m<sup>2</sup> ondervloer wil je laten leggen?</h5>
<input type="number" id="ondervloer" name="ondervloeren">
</div>
<hr>
<input id="JA3" type="radio" name="group4" value="Ja">
<label for="JA3" class="form-field__radio__label">Ja</label><br>
<input id="NEE3" type="radio" name="group4" onclick="JaNeeSecond()" value="Nee">
<label for="NEE3">Nee</label>
<hr>
<input id="JA4" type="radio" name="group5" value="Ja">
<label for="JA4" class="form-field__radio__label">Ja, meerprijs €5.00 per meter</label><br>
<input id="NEE4" type="radio" name="group5" onclick="JaNeeThirth()" value="Nee">
<label for="NEE4">Nee</label>
<hr>
<input id="JA5" type="radio" name="group6" value="Ja">
<label for="JA5" class="form-field__radio__label">Ja, meerprijs €2.50 per m<sup>2</sup></label><br>
<input id="NEE5" type="radio" name="group6" onclick="JaNeeFourth()" value="Nee">
<label for="NEE5">Nee</label>
<hr>
<input id="JA6" type="radio" name="group7" value="Ja">
<label for="JA6" class="form-field__radio__label">Ja, meerprijs €20.00 per deur</label><br>
<input id="NEE6" type="radio" name="group7" onclick="JaNeeFifth()" value="Nee">
<label for="NEE6">Nee</label>
<hr>
<input id="JA7" type="radio" name="group8" value="Ja">
<label for="JA7" class="form-field__radio__label">Ja, meerprijs €20.00 per plint</label><br>
<input id="NEE7" type="radio" name="group8" onclick="JaNeeSixth()" value="Nee">
<label for="NEE7">Nee</label>
<hr>
<input id="tweedebutton" type="button" value="volgende stap" onclick="show_next('user_details','qualification','bar2'); topFunction()" />
jQuery
$(document).ready(function () {
$("#tweedebutton").addClass("disabledbuttonNext");
$('input[type="radio"]').on('change', function () {
if ($('#LAMINAAT').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
$("#tweedebutton").removeClass("disabledbuttonNext");
} else if ($('#PARKET').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") && $('input[name="group6"]').is(":checked") ){
$("#tweedebutton").removeClass("disabledbuttonNext");
} else if ($('#PVC').is(":checked") && $('input[name="group3"]').is(":checked") && $('input[name="group4"]').is(":checked") && $('input[name="group5"]').is(":checked") && $('input[name="group7"]').is(":checked") && $('input[name="group8"]').is(":checked") ) {
$("#tweedebutton").removeClass("disabledbuttonNext");
}
else{
$("#tweedebutton").addClass("disabledbuttonNext");
}
});
});
$(document).ready(function () {
$('input[type="radio"], input[type="number"]').on('change', function () {
if ( $('#JA2').is(":checked") && $('#ondervloer').val() == '' ) {
$("#tweedebutton").addClass("disabledbuttonNext");
}
});
});
CSS
.disabledbuttonNext {
pointer-events: none;
opacity: 0.5;
}
I want the result to be when I filled in everything and I filled something in the number input(example: '1') that it reacts to it immediately and enables the button or in this case adds a class.

Here's the code similar for your application.
It interacts with both "radio buttons" as well as "input box" & accordingly triggers the "Submit button".
function checkout() {
alert("It worked");
}
$(document).ready(function() {
//console.log("Document loaded !");
$("input").change(function() {
var snacksValue = $('input[name="snacks"]:checked').val();
var extrasValue = $('input[name="extras"]:checked').val();
var quantity = $('#input1').val();
if (snacksValue != undefined && extrasValue != undefined && quantity != '') {
//console.log("go");
$('#checkout').removeClass("disabled");
$('#checkout').addClass("enabled");
} else {
//console.log("error");
$('#checkout').removeClass("enabled");
$('#checkout').addClass("disabled");
}
});
});
div {
margin: 10px 5px;
}
.enabled {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.disabled {
background-color: #e7e7e7;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
pointer-events: none;
/* display:none; */
/* If you wanna hide it */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label>
<input type="radio" name="snacks" value="burger" />
Burger</label>
<label>
<input type="radio" name="snacks" value="pizza" />Pizza</label>
<label>
<input type="radio" name="snacks" value="hotdog" /> Hotdog</label>
</div>
<div>
<label>
<input id="extra1" type="radio" name="extras" value="cheese">
With Cheese</label>
<label>
<input id="extra2" type="radio" name="extras" value="nocheese">
Without Cheese</label>
</div>
<div>
<label>Quantity</label>
<input id="input1" type="number" value="" min=1>
</div>
<div>
<input id="checkout" class="disabled" type="button" value="Next" onclick="checkout();" />
</div>

Change the value of a variable when an image is selected

I want to select one image among four of them. And then the variable that i have should be increased. If i select other image then the variable should change and take the value of that image. Here is the code i have so far that does not work
HTML
<div class="checkbox">
<input type="checkbox" name="paroxi" value="10"><br>
</div>
CSS
.checkbox{
width: 23px;
height: 21px;
background: black;
visibility:hidden;
}
.checked{
background: red;
visibility:block;
}
JAVASCRIPT
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});

If you wanna keep the checkboxes, guess to post price value later, than you can do it this way:
$('.image-selection input').on('change', function(e) {
$('.selected-value').text( $('.image-selection input:checked').val() );
}).trigger('change');
.image-selection input {
display: none;
}
.image-selection input:checked + img {
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-selection">
<label for="checkbox-1">
<input id="checkbox-1" name="image-input" type="radio" value="10" checked="checked" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-2">
<input id="checkbox-2" name="image-input" type="radio" value="20" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-3">
<input id="checkbox-3" name="image-input" type="radio" value="30" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-4">
<input id="checkbox-4" name="image-input" type="radio" value="40" />
<img src="http://placehold.it/150x150" />
</label>
</div>
<p>Price: <span class="selected-value"></span></p>
Also on JSFiddle.