We Keep Coding

How to set property of radio button to checked

There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?

Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>

Printing a message depending on a specific value

I'm having trouble with a project I am doing for university.
It consists on creating a diabetes risk assessment tool using html forms and javascript.
Basically there are 4 questions, each with 4 possible answers (using radio buttons, and user can only choose one answer per question).
In the end, there will be a "Calculate" button which will calculate the value of the selected answers, sum the values and display a message according the result. Here is the code for the html and javascript:
let calc = document.getElementById('form');
calc.addEventListener('submit', calculateAndPrintRisk);
function calculateRisk() {
let age = document.querySelector('input[name="age"]:checked').value;
let bmi = document.querySelector('input[name="bmi"]:checked').value;
let diabetes = document.querySelector('input[name="diabetes"]:checked').value;
let diet = document.querySelector('input[name="diet"]:checked').value;
return age + bmi + diabetes + diet;
};
function calculateAndPrintRisk(e) {
e.preventDefault();
var risk;
var riskTotal = calculateRisk();
if (riskTotal) {
if (riskTotal <= 15) {
alert("risk is low");
} else if (riskTotal <= 25) {
alert(risk = "medium");
} else {
alert(risk = "high");
}
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript FMA</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<script src="diabetestool.js"> </script>
<body>
<div id="wrapper">
<h1>The Diabetes Risk Assesment Tool</h1>
<div id="Options">
<form id="form">
<p> How old are you? </p>
1-25 <input type="radio" name="age" value="0" checked> 26-40 <input type="radio" name="age" value="5"> 41-60 <input type="radio" name="age" value="8"> 60+ <input type="radio" name="age" value="10">
<p> What is your BMI? </p>
0-25 <input type="radio" name="bmi" value="0" checked> 26-30 <input type="radio" name="bmi" value="0"> 31-35 <input type="radio" name="bmi" value="9"> 35+ <input type="radio" name="bmi" value="10">
<p> Does anybody in your family have diabetes? </p>
No <input type="radio" name="diabetes" value="0" checked> Grandparent <input type="radio" name="diabetes" value="7"> Sibling <input type="radio" name="diabetes" value="15"> Parent <input type="radio" name="diabetes" value="15">
<p> How would you describe your diet? </p>
Low sugar <input type="radio" name="diet" value="0" checked> Normal sugar <input type="radio" name="diet" value="0"> Quite high sugar <input type="radio" name="diet" value="7"> High sugar <input type="radio" name="diet" value="10">
<input type="submit" id="calculate" name="button_calculate" value="Calculate">
</form>
</div>
</div>
</body>
</html>
The code shows no errors, but does not work when I hit Calculate.
Any help would be greatly apreciated, since I am still learning javaScript.

Following 2 statements must have thrown errors -
alert("risk is low";
alert(risk = "high";
Hit F12 while you execute your code on any browser. Look for console in it. You must be seeing errors there.

You don't call your function when you submit your form
You need to add and eventListener to detect when you submit your post, then cancel the Event, call your calcultateRisk function
Your event should be something like that.
document.getElementById('form1').addEventListener('submit', function(evt){
evt.preventDefault();
// do what you want
// call your function
})

You can not use same id for more than one HTML element.
I have updated the code and used querySelector to get the value of radio elements.
let calc = document.getElementById('form');
calc.addEventListener('submit', calculateAndPrintRisk);
function calculateRisk() {
let age = document.querySelector('input[name="age"]:checked').value;
let bmi = document.querySelector('input[name="bmi"]:checked').value;
let diabetes = document.querySelector('input[name="diabetes"]:checked').value;
let diet = document.querySelector('input[name="diet"]:checked').value;
return age + bmi + diabetes + diet;
};
function calculateAndPrintRisk(e) {
e.preventDefault();
var risk;
var riskTotal = calculateRisk();
if (riskTotal) {
if (riskTotal <= 15) {
alert("risk is low");
} else if (riskTotal <= 25) {
alert(risk = "medium");
} else {
alert(risk = "high");
}
}
}
<div id="wrapper">
<h1>The Diabetes Risk Assesment Tool</h1>
<div id="Options">
<form id="form">
<p> How old are you? </p>
1-25 <input type="radio" name="age" value="0" checked> 26-40 <input type="radio" name="age" value="5"> 41-60 <input type="radio" name="age" value="8"> 60+ <input type="radio" name="age" value="10">
<p> What is your BMI? </p>
0-25 <input type="radio" name="bmi" value="0" checked> 26-30 <input type="radio" name="bmi" value="0"> 31-35 <input type="radio" name="bmi" value="9"> 35+ <input type="radio" name="bmi" value="10">
<p> Does anybody in your family have diabetes? </p>
No <input type="radio" name="diabetes" value="0" checked> Grandparent <input type="radio" name="diabetes" value="7"> Sibling <input type="radio" name="diabetes" value="15"> Parent <input type="radio" name="diabetes" value="15">
<p> How would you describe your diet? </p>
Low sugar <input type="radio" name="diet" value="0" checked> Normal sugar <input type="radio" name="diet" value="0"> Quite high sugar <input type="radio" name="diet" value="7"> High sugar <input type="radio" name="diet" value="10">
<input type="submit" id="calculate" name="button_calculate" value="Calculate">
</form>
</div>
</div>

There are a few typos, an unneccessary form ( as you dont want to submit something) and input values are generally strings, which are concatenated through the + operator. You may want to get all checked ones:
[...document.querySelectorAll('input:checked')]
and reduce them to their summed up value:
.reduce((sum,el)=>sum+parseInt(el.value),0);
function calculateRisk() {
return [...document.querySelectorAll('input:checked')].reduce((sum, el) => sum + parseInt(el.value), 0);
}
function calculateAndPrintRisk() {
var riskTotal = calculateRisk();
if (riskTotal <= 15) {
alert("risk is low");
} else if (riskTotal <= 25) {
alert("risk is medium");
} else {
alert("risk is high");
}
}
<div id="wrapper">
<h1>The Diabetes Risk Assesment Tool</h1>
<div id="Options">
<p> How old are you? </p>
1-25 <input type="radio" id="opt" name="age" value="0" checked> 26-40 <input type="radio" id="opt" name="age" value="5"> 41-60 <input type="radio" id="opt" name="age" value="8"> 60+ <input type="radio" id="opt" name="age" value="10">
<p> What is your BMI? </p>
0-25 <input type="radio" id="opt" name="bmi" value="0" checked> 26-30 <input type="radio" id="opt" name="bmi" value="0"> 31-35 <input type="radio" id="opt" name="bmi" value="9"> 35+ <input type="radio" id="opt" name="bmi" value="10">
<p> Does anybody in your family have diabetes? </p>
No <input type="radio" id="opt" name="diabetes" value="0" checked> Grandparent <input type="radio" id="opt" name="diabetes" value="7"> Sibling <input type="radio" id="opt" name="diabetes" value="15"> Parent <input type="radio" id="opt" name="diabetes"
value="15">
<p> How would you describe your diet? </p>
Low sugar <input type="radio" id="opt" name="diet" value="0" checked> Normal sugar <input type="radio" id="opt" name="diet" value="0"> Quite high sugar <input type="radio" id="opt" name="diet" value="7"> High sugar <input type="radio" id="opt" name="diet"
value="10">
<button id="calculate" name="button_calculate" value="Calculate" onclick="calculateAndPrintRisk();">Calculate</button>
</div>
</div>
Note that your if else could be simplified to
function calculateAndPrintRisk(){
alert("your risk is "+(riskTotal<=15?"low":(riskTotal<=25?"medium":"high")));
}

jQuery find dynamic input name

I have a simple form with radio buttons
<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>
And i have additional div with same radios (without form)
<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>
I want to make radios with same name and value in FORM to be checked when i check radios in DIV
How can i make it?

Attach a change() event handler then get the corresponding element in form using attribute equals selector and set it's checked property using prop() method.
$('.attributes :radio').change(function() {
$('form [name="radio_1"][value="' + this.value + '"]').prop('checked', this.checked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>
<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>

Use this code :
$(".attributes :radio").on("change",function(){
$("form input[value = " + $(this).val() + "]").prop("checked",$(this).prop("checked"));
})
Final code :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>
<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".attributes :radio").on("change",function(){
$("form input[value = " + $(this).val() + "]").prop("checked",$(this).prop("checked"));
})
})
</script>
</body>
</html>

This should do it! It will work with multiple groups of checkboxes as demonstrated in the demo.
$('div :radio').change(function() {
$('form :radio[name="' + this.name + '"][value="' + this.value + '"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
A: <input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
<br>
B: <input type="radio" name="radio_2" value="1" />Radio 1
<input type="radio" name="radio_2" value="2" />Radio 2
<input type="radio" name="radio_2" value="3" />Radio 3
</form>
<div class="attributes">
A: <input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
<br>
B: <input type="radio" name="radio_2" value="1" />Radio 1
<input type="radio" name="radio_2" value="2" />Radio 2
<input type="radio" name="radio_2" value="3" />Radio 3
</div>

There are a few ways to do it, but simple way would be to make a selector based on name and value.
$('input[type="radio"]').on("change", function () {
$('input[type="radio"][name="'+this.name+'"][value="'+this.value+'"]').prop("checked", true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</form>
<div class="attributes">
<input type="radio" name="radio_1" value="1" />Radio 1
<input type="radio" name="radio_1" value="2" />Radio 2
<input type="radio" name="radio_1" value="3" />Radio 3
</div>

You can use <lable> tag and add for attribute which refers identifier of radio button. as mentioned below
Also I have added javascript for select same radia button vise-e-versa.
$('form input[type="radio"], attribute input[type="radio"]').click(function(){
//alert($(this).attr('name')+"::"+$(this).attr('value'));
$('input[name="'+$(this).attr('name')+'"][value="'+$(this).attr('value')+'"]').not(this).trigger('click');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
<input type="radio" name="radio_1" id="radio_11" value="1" /><label for="radio_11" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_12" value="2" /><label for="radio_12" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_13" value="3" /><label for="radio_13" >Radio 1</label>
</form>
<div class="attributes">
<input type="radio" name="radio_1" id="radio_21" value="1" /><label for="radio_21" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_22" value="2" /><label for="radio_22" >Radio 1</label>
<input type="radio" name="radio_1" id="radio_23" value="3" /><label for="radio_23" >Radio 1</label>
</div>

radio button is selecting multiple values

<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/Quiz.css">
<script>
var xmlh,url;
xmlh = new XMLHttpRequest();
url="AnswerFile.txt";
xmlh.onreadystatechange=function(){
if(xmlh.readyState == 4 && xmlh.status ==200){
var myArr =JSON.parse(xmlh.responseText);
myFunctuion(myArr);
}
};
xmlh.open("GET",url,true);
xmlh.send();
function myFunctuion(arr){
var dom=document.getElementById("demo");
var cha=document.getElementById("radio1");
var chb=document.getElementById("radio2");
var chc=document.getElementById("radio3");
dom.innerHTML = "<h3>" +arr[0].question+ "</h3>";
cha.innerHTML = arr[0].ChA ;
chb.innerHTML = arr[0].ChB ;
chc.innerHTML = arr[0].ChC ;
}
</script>
<head>
<html>
<body>
<div class="w3-content" >
<form class="w3-container w3-card-4 w3-label">
<label id="demo"></label>
<input class="w3-radio" type="radio" name="ChA" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="ChB" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="ChC" value="c"> <label id="radio3"></label></input></br>
<br>
<br>
<input class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey w3-center w3-section w3-border w3-round-xlarge " style="font-weight:900;" type="submit" value="Submit Answers">
</form>
</div>
</body>
</html>
i get my all question and option from text file by JSON and i succeeded it .
But my main problem is all my radio button is checked where i want to if one button is checked then other button is unchecked .
what my problem in code ? what i do? and why cause this problem ?
?** for style i use W3.CSS **?

Your HTML input radio should have the same name attribute, like this:
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>

Your radio buttons should all use the same name :)
<input class="w3-radio" type="radio" name="Ch" value="a"> <label id="radio1"></label></input></br>
<input class="w3-radio" type="radio" name="Ch" value="b"><label id="radio2"></label> </input></br>
<input class="w3-radio" type="radio" name="Ch" value="c"> <label id="radio3"></label></input></br>

Name of your radio input fields should be same for specific question's options. Like below:
First group of radios
<input type="radio" name="rad" value="radopt1" id="radopt1"><label for="radopt1">Radio Option1</label></input>
<input type="radio" name="rad" value="radopt2" id="radopt2"><label for="radopt2">Radio Option2</label> </input>
<input type="radio" name="rad" value="radopt3" id="radopt3"><label for="radopt3">Radio Option3</label></input>
Second group of radios
<input type="radio" name="rad1" value="rad1opt1" id="rad1opt1"><label for="rad1opt1">Radio1 Option1</label></input>
<input type="radio" name="rad1" value="rad1opt2" id="rad1opt2"><label for="rad1opt2">Radio1 Option2</label> </input>
<input type="radio" name="rad1" value="rad1opt3" id="rad1opt3"><label for="rad1opt3">Radio1 Option3</label></input>

javascript doesn't show alert message

I am working with radio buttons and a submit button to send the inputs of the radio buttons to a javascript file called script.js. Whenever i click the submit button without selecting data from the radio buttons, the alert message "Please fill out all fields" does not show.
my code of index.php
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
_path = $('img').attr('src');
_img_id = _path.replace('img/img', '');
_img_id = _img_id.replace('.jpg', '');
_img_id++;
$('img').attr('src', 'img/img' + _img_id + '.jpg');
}, 15000);
});
</script>
</head>
<body id="page-top">
<header>
<h1><img src="img/img1.jpg" alt="image" style="width:738px;height:444px;"></h1>
<hr>
<label>Alignment: </label>
<input type="radio" name="group1" value="5"> 5
<input type="radio" name="group1" value="4"> 4
<input type="radio" name="group1" value="3"> 3
<input type="radio" name="group1" value="2"> 2
<input type="radio" name="group1" value="1"> 1
<hr>
<label>Blend: </label>
<input type="radio" name="group2" value="5"> 5
<input type="radio" name="group2" value="4"> 4
<input type="radio" name="group2" value="3"> 3
<input type="radio" name="group2" value="2"> 2
<input type="radio" name="group2" value="1"> 1
<hr>
<label>Warp: </label>
<input type="radio" name="group3" value="5"> 5
<input type="radio" name="group3" value="4"> 4
<input type="radio" name="group3" value="3"> 3
<input type="radio" name="group3" value="2"> 2
<input type="radio" name="group3" value="1"> 1
<hr>
<label>Overall: </label>
<input type="radio" name="group4" value="5"> 5
<input type="radio" name="group4" value="4"> 4
<input type="radio" name="group4" value="3"> 3
<input type="radio" name="group4" value="2"> 2
<input type="radio" name="group4" value="1"> 1
<hr>
<input type="submit" id="submit" name="submit" value="Submit">
</header>
</body>
</html>
my code of script.js
$(document).ready(function () {
$("#submit").click(function () {
var radio1 = $("input[name=group1]:checked").val();
var radio2 = $("input[name=group2]:checked").val();
var radio3 = $("input[name=group3]:checked").val();
var radio4 = $("input[name=group4]:checked").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = '&submit1=' + radio1 + '&submit2=' + radio2 + '&submit3=' + radio3 + '&submit4=' + radio4;
if (radio1 == '' || radio2 == '' || radio3 == '' || radio4 == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function (result) {
alert(result);
}
});
}
return false;
});
});

i just saw they are radios, check for falsy values as well, e.g !radio1 || !radio2 etc..
Specificaly jQuery tries to select a checked radio, but none maybe checked, so the jQuery object is empty, so the .val() will return a falsy value (e.g null or undefined).

Your html is not conform - see input tag without form tag :
<form onsubmit="yourfunction(); return false;"> ...
or use simply a tag button :
<button id="submit">Submit</button>

You can test radio input for undefined like this https://jsfiddle.net/2Lzo9vfc/6/
if (radio1 == undefined || radio2 == undefined || radio3 == undefined || radio4 == undefined) {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
}