Getting radio button value & text without using asp.net controls

Question

Hello Team, Can anyone guide me on getting radio button list selected value & text without using asp.net controls(Gridview & DataList) Can anyone guide me on this. Thank you in advance!!

Sachin Singh · Answer

it completely depends on Html structure, for radiobuttons constructed like below "radio" name= "MyRadio" value= "20" data-name= "5 - Excellent" checked= "true" >5 - Excellent "radio" name= "MyRadio" value= "20" data-name= "4 - Good" >4 - Good You will get text and value using Jquery like below var Text=$( "input[name='MyRadio']:checked" ).parent( 'label' ).text(); var Value=$( "input[name='MyRadio']:checked" ).Val();

Sachin Singh · Answer

hii sam This is the solution of your recently asked question , Quiz App with Jquery "~/Scripts/jquery-3.4.1.min.js" > body { font-size: 20px; font-family: sans-serif; color: #333; } .question { font-weight: 600; } .answers { margin-bottom: 20px; } .answers label { display: block; } #submit { font-family: sans-serif; font-size: 20px; background-color: #279; color: #fff; border: 0px; border-radius: 3px; padding: 20px; cursor: pointer; margin-bottom: 20px; } #submit:hover { background-color: #38a; } "quiz" > "submit" >Submit Quiz "results" > "startQuiz()" >start Quiz (function () { const quizContainer = document.getElementById( 'quiz' ); const resultsContainer = document.getElementById( 'results' ); const submitButton = document.getElementById( 'submit' ); const myQuestions = [ { question: "Who invented JavaScript?" , answers: { a: "Douglas Crockford" , b: "Sheryl Sandberg" , c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Which one of these is a JavaScript package manager?" , answers: { a: "Node.js" , b: "TypeScript" , c: "npm" }, correctAnswer: "c" }, { question: "Which tool can you use to ensure code quality?" , answers: { a: "Angular" , b: "jQuery" , c: "RequireJS" , d: "ESLint" }, correctAnswer: "d" } ]; function buildQuiz(){ // variable to store the HTML output const output = []; myQuestions.forEach(function (currentQuestion, questionNumber) { const answers = []; // and for each available answer... for (letter in currentQuestion.answers) { debugger; // ...add an HTML radio button answers.push( " " + " +questionNumber+' " +" value= '+letter+"' >"+ letter + ":" + currentQuestion.answers[letter]+ "}" + " " ); } // add this question and its answers to the output output.push( " " + currentQuestion.question+ " " + " " + answers.join( '' )+ " " ); }) // finally combine our output list into one string of HTML and put it on the page quizContainer.innerHTML = output.join( '' ); } function showResults(){ // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll( '.answers' ); // keep track of user's answers let numCorrect = 0; // for each question... myQuestions.forEach(function (currentQuestion, questionNumber) { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = "input[name=question" + questionNumber + "]:checked" ; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if (userAnswer === currentQuestion.correctAnswer) { // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = 'lightgreen' ; } // if answer is wrong or blank else { // color the answers red answerContainers[questionNumber].style.color = 'red' ; } }); // show number of correct answers out of total resultsContainer.innerHTML = numCorrect + "out of " + myQuestions.length; } // Kick things off buildQuiz(); // Event listeners submitButton.addEventListener( 'click' , showResults); })();