Это на самом деле довольно простой друг.
Вы можете получить значение выбранной кнопки, используя свойство checked.Поскольку из группы можно выбрать только одну радиокнопку, вы сможете легко получить значение выбранного с помощью этого свойства в цикле if внутри javascript.
Поскольку вы уже дали options переключателей name, то есть пол .Вы можете просто получить все элементы option s, используя следующее:
var options = document.getElementsByName('gender');
var option_value; //to get the selected value
Следующим шагом является цикл по всем кнопкам и проверка, какая из них выбрана ..Для их обхода используйте цикл for следующим образом: for (var i = 0; i < options.length; i++) {...}
Чтобы проверить, выбран он или нет, используйте атрибут checked следующим образом:
if (options[i].checked) {
option_value = options[i].value;
}
Я не уверен, что вы намереваетесь делать с этими значениями, поэтому я предположил, что вам нужно отобразить их и для этого просто создать другой элемент, например <div>, и присвоить ему идентификатор.А затем просто добавьте значение выбранного параметра к этому элементу.Должно быть что-то вроде этого:
HTML: <div id="selected">The selected options are:</div>
JS: document.getElementById('selected').innerHTML += "<br>" + option_value;
Обновлен скрипка .
Или, если вы хотите проверить это прямо здесь, вот обновленный код:
var app = angular.module('surveyApp', []);
app.controller('surveyCtrl', function($scope) {
$scope.questionSet = [{
onePageQuestions: [{
question: [{
description: 'question#1?',
options: [{
answer: 'answer#1'
}, {
answer: 'answer#2'
}, {
answer: 'answer#3'
}]
},
{
description: 'question#2?',
options: [{
answer: 'answer#4'
}, {
answer: 'answer#5'
}, {
answer: 'answer#6'
}]
}
]
}]
},
{
onePageQuestions: [{
question: [{
description: 'question#3?',
options: [{
answer: 'answer#7'
}, {
answer: 'answer#8'
}, {
answer: 'answer#9'
}]
}]
}]
}
];
$scope.question_index = 0;
$scope.next = function() {
if ($scope.question_index >= $scope.questionSet.length - 1) {
$scope.question_index = 0;
} else {
$scope.question_index++;
}
};
$scope.submitAnswers = function() {
var options = document.getElementsByName('gender');
var option_value;
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
option_value = options[i].value;
document.getElementById('selected').innerHTML += "<br>" + option_value;
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="surveyApp" ng-controller="surveyCtrl">
<div ng-repeat="questionSet in questionSet">
<div ng-if="question_index == $index">
<div ng-repeat="onePageQuestions in questionSet.onePageQuestions">
<div ng-repeat="question in onePageQuestions.question">
{{question.description}}
<form action="">
<div ng-repeat="options in question.options">
<input type="radio" name="gender" ng-model="question.random" ng-value="options.answer"> {{options.answer}}
</div>
</form>
</div>
</div>
</div>
</div>
<hr>
<button ng-click="next(); submitAnswers()">Next</button>
<hr>
<div id="selected">The selected options are:
</div>
</div>