We Keep Coding

How do I check if another checkbox is checked and perform the function again with added conditions?

So I was tasked with creating a menu in which the user will choose between four noodles, four main dishes, and three sides. The sides will multiply the price of the main dish. The catch is that for every noodle the user checked, it will be incremented to the total price by 50%. So, if the user pays $120 and chooses two noodles, it will be $180.
I know that the checkbox will call for two functions, but I have no clue as to how it would work only if there are two or more checked checkboxes. Can someone help or guide me into how to actually perform this?
Fiddle
function pmodel() {
Model();
finalCost();
}
function Model() {
if (document.querySelector('input[name="NDLS"]:checked')) {
document.getElementById("MMD").disabled = false;
document.getElementById("ADDONS").disabled = false;
} else {
document.getElementById("MMD").disabled = true;
document.getElementById("ADDONS").disabled = true;
}
}
function total() {
var selected1 = document.querySelector('input[name="MD"]:checked').value;
var selected2 = document.querySelector('input[name="ADDONS"]:checked').value;
//var totals = 0;
totals = (selected1 * selected2);
finalCost(totals);
}
function finalCost(totals) {
//totals += (totals * document.querySelector('input[id="PMODEL"]').value);
document.getElementById("amount").value = totals;
}
<fieldset id="MNDLS">
<legend>Noodles</legend>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Spaghetti</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Carbonara</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Lasagna</label><br>
<input type="checkbox" name="NDLS" id="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Plain</label>
</fieldset>
<fieldset id="MMD" disabled>
<legend>Main Dish</legend>
<input type="radio" name="MD" value="50" onclick="total()">
<label>Chicken Wings ($50)</label><br>
<input type="radio" name="MD" value="55" onclick="total()">
<label>Chicken Breast ($55)</label><br>
<input type="radio" name="MD" value="60" onclick="total()">
<label>Pork Cutlets ($60)</label><br>
<input type="radio" name="MD" value="65" onclick="total()">
<label>Steak($65)</label>
</fieldset>
<fieldset id="ADDONS" disabled>
<legend>Sides</legend>
<input type="radio" name="ADDONS" value="1" onclick="total()">
<label>Nothing (100%)</label><br>
<input type="radio" name="ADDONS" value="1.5" onclick="total()">
<label>Softdrinks (150%)</label><br>
<input type="radio" name="ADDONS" value="2" onclick="total()">
<label>Softdrinks and Fries (200%)</label>
</fieldset>
<br>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>

First of all don't use same ID more than once, they should be unique.
Instead of that you can set your checkboxes with same class (just for ease selecting) and then count how many of them are checked:
function pmodel() {
var count = 0;
var list=document.getElementsByClassName("PNDLS");
for (var i = 0; i < list.length; ++i) { if(list[i].checked) { count++; } }
console.log(count);
}
<fieldset id="MNDLS">
<legend>Noodles</legend>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Spaghetti</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Carbonara</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Lasagna</label><br>
<input type="checkbox" name="NDLS" class="PNDLS" value="0.5" onclick="pmodel()">
<label for="Model">Plain</label>
</fieldset>
<fieldset id="MMD" disabled>
<legend>Main Dish</legend>
<input type="radio" name="MD" value="50" onclick="total()">
<label>Chicken Wings ($50)</label><br>
<input type="radio" name="MD" value="55" onclick="total()">
<label>Chicken Breast ($55)</label><br>
<input type="radio" name="MD" value="60" onclick="total()">
<label>Pork Cutlets ($60)</label><br>
<input type="radio" name="MD" value="65" onclick="total()">
<label>Steak($65)</label>
</fieldset>
<fieldset id="ADDONS" disabled>
<legend>Sides</legend>
<input type="radio" name="ADDONS" value="1" onclick="total()">
<label>Nothing (100%)</label><br>
<input type="radio" name="ADDONS" value="1.5" onclick="total()">
<label>Softdrinks (150%)</label><br>
<input type="radio" name="ADDONS" value="2" onclick="total()">
<label>Softdrinks and Fries (200%)</label>
</fieldset>
<br>
<p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>

Javascript this.form.submit() with radio button

i have this star rating system for my webpage, where you can select a star rating (1-5) and i wanted to send the form when someone clicks any of the stars, but right now, it does not send the radio button value if i check something, i think its because it sends the form before it checks the radio button. Is there any better way to send the form with the radio button value onclick?
<form method="POST" action="/rating" accept-charset="UTF-8"><input name="_token" type="hidden" value="vySkIFDPujcmxjfs83m3OwojcbPIaHuuMhKvVErx">
<input name="movie_id" type="hidden" value="2">
<input id="star5" name="rating" type="radio" value="5">
<label for="star5" class="full" title="Awesome" onclick="this.form.submit()"> </label>
<input id="star4" name="rating" type="radio" value="4">
<label for="star4" class="full" title="Good" onclick="this.form.submit()"> </label>
<input id="star3" name="rating" type="radio" value="3">
<label for="star3" class="full" title="Mediocre" onclick="this.form.submit()"> </label>
<input id="star2" name="rating" type="radio" value="2">
<label for="star2" class="full" title="Bad" onclick="this.form.submit()"> </label>
<input id="star1" name="rating" type="radio" value="1">
<label for="star1" class="full" title="Horrible" onclick="this.form.submit()"> </label>
</form>

Use onchange on the <input /> elements instead:
<form method="POST" action="/rating" accept-charset="UTF-8"><input name="_token" type="hidden" value="vySkIFDPujcmxjfs83m3OwojcbPIaHuuMhKvVErx">
<input name="movie_id" type="hidden" value="2">
<label for="star5" class="full" title="Awesome">
<input id="star5" name="rating" type="radio" value="5" onchange="this.form.submit()">
</label>
<label for="star4" class="full" title="Good">
<input id="star4" name="rating" type="radio" value="4" onchange="this.form.submit()">
</label>
<label for="star3" class="full" title="Mediocre">
<input id="star3" name="rating" type="radio" value="3" onchange="this.form.submit()">
</label>
<label for="star2" class="full" title="Bad">
<input id="star2" name="rating" type="radio" value="2" onchange="this.form.submit()">
</label>
<label for="star1" class="full" title="Horrible">
<input id="star1" name="rating" type="radio" value="1" onchange="this.form.submit()">
</label>
</form>

How to add up values of radio buttons in Javascript

I'm a newbie coder and cannot for the life of me figure out how to add up values for radio buttons below - any help would be greatly appreciated!
I am trying to create a diabetes screening assessment tool - where you will be able to assign different values to different risk factors.

You would need to use JavaScript to accomplish this.
Here's one way to do it:
Listen for the form's submit event
Prevent the default (so that the form doesn't get sent to the server)
Grab the value from each field. Fields use the name attribute from the HTML
Use parseInt on each field because they'll be strings
Add them up
Display the result (in this example, in the console)
const form = document.querySelector('form')
form.addEventListener('submit', event => {
event.preventDefault()
const total =
parseInt(form.age.value) +
parseInt(form.bmi.value) +
parseInt(form.famhistory.value) +
parseInt(form.diet.value)
console.log(total)
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zedland Health Authority's Diabetes health assessment tool</title>
<link rel="stylesheet" type="text/css" href="fma.css">
<script src="fma.js"></script>
</head>
<body>
<h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
<form id="register">
<fieldset id="controls">
<div>
<label class="button" for="Age">How old are you?</label>
<input type="radio" id="agerange" name="age" value="0" checked="checked">
<label for="agerange1">1-25</label>
<input type="radio" id="agerange" name="age" value="5">
<label for="agerange2">26-40</label>
<input type="radio" id="agerange" name="age" value="8">
<label for="agerange3">40-60</label>
<input type="radio" id="agerange" name="age" value="10">
<label for="agerange4">60+</label>
</div>
<div>
<label class="button" for="bmi">What is your BMI?</label>
<input type="radio" id="bmi" name="bmi" value="0" checked="checked">
<label for="bmi1">0-25</label>
<input type="radio" id="bmi" name="bmi" value="0">
<label for="bmi2">26-30</label>
<input type="radio" id="bmi" name="bmi" value="9">
<label for="bmi3">31-35</label>
<input type="radio" id="bmi" name="bmi" value="10">
<label for="bmi4">35+</label>
</div>
<div>
<label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
<input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
<label for="famhistory1">No</label>
<input type="radio" id="famhistory" name="famhistory" value="7">
<label for="famhistory2">Grandparent</label>
<input type="radio" id="famhistory" name="famhistory" <label for="famhistory3">Sibling</label>
<input type="radio" id="famhistory" name="famhistory" value="15">
<label for="famhistory4">Parent</label>
</div>
<div>
<label class="button" for="diet">How would you describe your diet?</label>
<input type="radio" id="diet" name="diet" value="0" checked="checked">
<label for="diet1">Low sugar</label>
<input type="radio" id="diet" name="diet" value="7">
<label for="diet2">Normal sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet3">Quite high sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet4">High sugar</label>
</div>
</fieldset>
<div>
<input type="submit" value="submit" id="submit">
</div>
</form>
</body>
</html>

If you plan on adding values, here is a more flexible approach.
The idea is to loop through each relevant input (those that are inside your fieldset with ID controls), regardless of its name, so that if you add more checks, the same code will still work.
Create a score variable and increment it with the value of each input that is checked.
Be careful, you have the value 0 TWICE for the BMI check
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
var inputs = document.querySelectorAll('#controls input');
var score = 0;
inputs.forEach(function(input) {
if (input.checked) {
score += parseInt(input.value, 10);
}
});
console.log(score);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Zedland Health Authority's Diabetes health assessment tool</title>
<script>
</script>
</head>
<body>
<h1 id="pageheading">Zedland Health Authority's Diabetes health assessment tool</h1>
<form id="register">
<fieldset id="controls">
<div>
<label class="button" for="Age">How old are you?</label>
<input type="radio" id="agerange" name="age" value="0" checked="checked">
<label for="agerange1">1-25</label>
<input type="radio" id="agerange" name="age" value="5">
<label for="agerange2">26-40</label>
<input type="radio" id="agerange" name="age" value="8">
<label for="agerange3">40-60</label>
<input type="radio" id="agerange" name="age" value="10">
<label for="agerange4">60+</label>
</div>
<div>
<label class="button" for="bmi">What is your BMI?</label>
<input type="radio" id="bmi" name="bmi" value="0" checked="checked">
<label for="bmi1">0-25</label>
<input type="radio" id="bmi" name="bmi" value="0">
<label for="bmi2">26-30</label>
<input type="radio" id="bmi" name="bmi" value="9">
<label for="bmi3">31-35</label>
<input type="radio" id="bmi" name="bmi" value="10">
<label for="bmi4">35+</label>
</div>
<div>
<label class="button" for="famhistory">Does anybody in your family have diabetes?</label>
<input type="radio" id="famhistory" name="famhistory" value="0" checked="checked">
<label for="famhistory1">No</label>
<input type="radio" id="famhistory" name="famhistory" value="7">
<label for="famhistory2">Grandparent</label>
<input type="radio" id="famhistory" name="famhistory"
<label for="famhistory3">Sibling</label>
<input type="radio" id="famhistory" name="famhistory" value="15">
<label for="famhistory4">Parent</label>
</div>
<div>
<label class="button" for="diet">How would you describe your diet?</label>
<input type="radio" id="diet" name="diet" value="0" checked="checked">
<label for="diet1">Low sugar</label>
<input type="radio" id="diet" name="diet" value="7">
<label for="diet2">Normal sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet3">Quite high sugar</label>
<input type="radio" id="diet" name="diet" value="15">
<label for="diet4">High sugar</label>
</div>
</fieldset>
<div>
<input type="submit" value="submit">
</div>
</form>
</body>
</html>

check radiobutton 1, when radiobutton 3 is checked

i have html page like this
<br>Q1A Making decisions after finding out what others think <br>
<input name="q1a" id="0" value="0" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="1" value="1" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="2" value="2" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="3" value="3" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="4" value="4" onclick="MyAlert()" type="radio" required>
<input name="q1a" id="5" value="5" onclick="MyAlert()" type="radio" required>
<br>Q1B Making decisions without consulting others <br>
<input name="q1b" id="6" value="0" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="7" value="1" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="8" value="2" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="9" value="3" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="10" value="4" onclick="MyAlert()" type="radio" required>
<input name="q1b" id="11" value="5" onclick="MyAlert()" type="radio" required>
if Q1A's value 1 is checked by user, at that moment i want to check Q1B's value 4. analogy is, Q1A's value + Q1B's value = 5.
how can i do this ?
my rough idea is:
<script>
function MyAlert()
{
var q1a = document.getElementByName("q1a").value();
if(q1a == 0){
$('#5[name="q1b"]').attr('checked', true);
}
}
</script>
but this is not working.
My Code Example
Thank you for help.

You have duplicate IDs, that won't work. getElementById() just returns the first element with that ID.
Instead of finding the element by its ID, find it by its value, a [value=] selector.
function MyAlert(button) {
if (button.name == 'q19a') {
var otherName = 'q19b';
var otherVal = 5 - button.value;
$(":radio[name=" + otherName + "][value=" + otherVal + "]").prop("checked", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>Q19A Using common sense and conviction to make decisions <br>
<input name="q19a" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q19a" value="5" onclick="MyAlert(this)" type="radio" required>
<br>Q19B Using data, analysis, and reason to make decisions <br>
<input name="q19b" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q19b" value="5" onclick="MyAlert(this)" type="radio" required>
<br>Q20A Planning ahead based on projections <br>
<input name="q20a" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q20a" value="5" onclick="MyAlert(this)" type="radio" required>
<br>Q20B Planning as necessities arise, just before carrying out the plans <br>
<input name="q20b" value="0" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="1" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="2" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="3" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="4" onclick="MyAlert(this)" type="radio" required>
<input name="q20b" value="5" onclick="MyAlert(this)" type="radio" required>

addClassRules() to multiple fields but only allow 1 at a minimum

So I have 10 checkbox fields, more then 1 can be selected, but at least 1 has to be selected at a minimum.
I had it working use the name="" attribute but that was not the case anymore as the name has to be unique to integrate with our CRM.
So I added the rule to use the class instead using addClassRule() and I added my own method to use a custom message for required.
But the result is they are all required. regardless if 1 or more is selected?
Here is my jQuery which is working but it requires all 10 checkbox's to be checked.
$.validator.addMethod("checkboxRequired", $.validator.methods.required, "Please select at least 1 of the values");
jQuery.validator.addClassRules('checkbox-validate', {
checkboxRequired: true
});
HTML code:
<div id="id_1" class="form-input">
<label for="test1"><input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1">1</label>
<label for="test2"><input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2">2</label>
<label for="test3"><input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3">3</label>
<label for="test4"><input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4">4</label>
<label for="test5"><input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5">5</label>
<label for="test6"><input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6">6</label>
<label for="test7"><input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7">7</label>
<label for="test8"><input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8">8</label>
<label for="test9"><input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9">9</label>
<label for="test10"><input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10">10</label>
</div>

Try require_from_group-method rule
jQuery(function($) {
jQuery.validator.addClassRules('checkbox-validate', {
require_from_group: [1, ".checkbox-validate"]
});
var validator = $('#myform').validate({
rules: {},
messages: {},
errorPlacement: function(error, element) {
if (element.hasClass('checkbox-validate')) {
element.closest('.form-input').find('.error-holder').html(error)
} else {
error.insertAfter(element);
}
}
});
});
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/additional-methods.js"></script>
<form id="myform" method="post" action="">
<div id="id_1" class="form-input">
<label for="test1">
<input class="checkbox-validate" type="checkbox" id="test1" name="test1" value="1" />1</label>
<label for="test2">
<input class="checkbox-validate" type="checkbox" id="test2" name="test2" value="2" />2</label>
<label for="test3">
<input class="checkbox-validate" type="checkbox" id="test3" name="test3" value="3" />3</label>
<label for="test4">
<input class="checkbox-validate" type="checkbox" id="test4" name="test4" value="4" />4</label>
<label for="test5">
<input class="checkbox-validate" type="checkbox" id="test5" name="test5" value="5" />5</label>
<label for="test6">
<input class="checkbox-validate" type="checkbox" id="test6" name="test6" value="6" />6</label>
<label for="test7">
<input class="checkbox-validate" type="checkbox" id="test7" name="test7" value="7" />7</label>
<label for="test8">
<input class="checkbox-validate" type="checkbox" id="test8" name="test8" value="8" />8</label>
<label for="test9">
<input class="checkbox-validate" type="checkbox" id="test9" name="test9" value="9" />9</label>
<label for="test10">
<input class="checkbox-validate" type="checkbox" id="test10" name="test10" value="10" />10</label>
<span class="error-holder"></span>
</div>
<input type="submit" value="Save" />
</form>

You need to make your name attribute all be the same value. Then you can check how many are checked like so:
var count = $('input[name=test]:checked').size();