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>

Select the value of an element by name

How to access the value of this input field that is checked by its name attribute using Javascript :
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
I write this :
document.querySelector('input[name="rate"]:checked').value;
but there is an error:
TypeError: document.querySelector(...) is null
And I do not want to be checked any inputs by default

Not sure if this will help you, but this snippet lets you select the value of the radio element that is checked, if it exists.
radioElems = document.querySelectorAll("input[name='rate']");
radioElems.forEach((elem) => {
if (elem.checked) {
console.log(`Check found with value ${elem.value}`);
} else {
console.log("Not checked");
}
});

You're missing quotes:
document.querySelector('input[name="rate"]:checked').value;

you should call function for each radio button change event
function handleRadioButtonChange() {
console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" class="radioButton" name="rate" value="1" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="2" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="3" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="4" onchange="handleRadioButtonChange()">

You can check if any element matches your querySelector before accessing the value like this:
document.querySelector('input[name="rate"]:checked') && document.querySelector('input[name="rate"]:checked').value

Run a function every time the input change status changes using onchange this function, in turn, logs the value of the clicked input
var rate = document.querySelectorAll(('input[name="rate"]'))
rate.forEach( each => (each.onchange = () => (console.log(each.value))))
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">

What you're doing is absolutely correct! You just need to call this in onchange of the input. Since, you're calling this when no inputs are checked, you're getting this error.
function handleChange1(){
console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" onchange="handleChange1();" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">

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>

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>

total amount is getting displayed as NAN,javascript

I have a form in which i have two sets of radio buttons and one textbox to enter the quantity value.
Based on the radio button selected and value in quantity textbox the total textbox should get populated with values.
I am using array to do the calculation but the value in total fields is displayed as NAN.
Can anyone check my code and let me know where i am wrong??
**HTML**
<form id="orderform" name="orderform" >
<fieldset data-role="controlgroup">
<legend><b>Choice</b></legend>
<input type="radio" name="choice" id="veg" value="1" checked onclick="total()">
<label for="veg">Vegetarian</label>
<input type="radio" name="choice" id="nonveg" value="2" onclick="total()">
<label for="nonveg">Meat Lover</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
</fieldset>
<div><b>Quantity</b>
<input type="text" id ="qty" name="qty" size="5" onclick="total()">
</div><div>
<b>Total</b>
<input type="text" id="amt" name="amt" readonly="readonly">
</div>
Javascript
Javascript
var array=[[8.99,9.99,10.99],[9.99,10.99,11.99]];
function total()
{
var row = document.querySelector('input[name="choice"]:checked').value;
var column = document.querySelector('input[name="size"]:checked').value;
var qty=document.getElementById("qty").value;
var total=0;
total= (array[row][column]+1)*qty;
document.orderform.amt.value = total;
}

You have to change size group in html like below
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" value="1" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" value="2" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" value="3" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
it will work for you

var column = document.querySelector('input[name="size"]:checked').value;
you can alert(column), you'll find that value is "on". because you didn't setup any value in all of your size group