How to reset or uncheckvalue of radio button with same name - javascript

I am trying to make a MCQ quiz question, where each question carries 4 options. I want to put individual reset button for each questions. When i click on reset button it reset or uncheck all radio button. How to reset radio button of same group or name?
<div class="col-lg-10 col-md-10 col-sm-9">
<div class="lms_service_detail">
<h3>An object is represented by two attributes, out of which one is characteristics and the other one is ___________.</h3>
<p><input name="1" id="Radio1" type="radio" value="A" /> Behaviour</p>
<p><input name="1" id="Radio2" type="radio" value="B" /> Situation</p>
<p><input name="1" id="Radio3" type="radio" value="C" /> Abstraction</p>
<p><input name="1" id="Radio4" type="radio" value="D" /> Encapsulation</p>
<p><input id="Submit1" type="submit" value="Reset" /></p>
</div>
</div>
<div class="col-lg-10 col-md-10 col-sm-9">
<div class="lms_service_detail">
<h3>Name the programming technique that implements programs as an organized collection of interactive objects.</h3>
<p><input name="2" id="Radio5" type="radio" value="A" /> Procedural Programming</p>
<p><input name="2" id="Radio6" type="radio" value="B" /> Modular Programming</p>
<p><input name="2" id="Radio7" type="radio" value="C" /> Object-Oriented Programming</p>
<p><input name="2" id="Radio8" type="radio" value="D" /> None of these</p>
<p><input id="Submit2" type="submit" value="Reset" /></p>
</div>
</div>

function onResetClick() {
var $firstQuestion = document.querySelectorAll('input[name=1]');
var $secondQuestion = document.querySelectorAll('input[name=2]');
for (var i = 0; i < $firstQuestion.length; i++) {
var $el = $firstQuestion;
$el.setAttribute('checked', false);
}
for (i = 0; i < $secondQuestion.length; i++) {
$el = $secondQuestion;
$el.setAttribute('checked', false);
}
}
Binding the onResetClick method will first get all the inputs corresponding to the questions. Then, we iterate over the elements and setAttribute checked as false. No jQuery required.

In JQuery you can use:
$('input[name=Choose]').attr('checked',false); //for a specific radio button
OR
$('input').attr('checked',false); //for all radio buttons
And In JavaScript:
var ele = document.getElementsByName("Choose");
ele.checked = false; //for specific element
OR
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs .length;i++)
inputs [i].checked = false; //for all radio buttons

Related

Radio button calculator with nested if Stateme

I am trying to create a pricing calculator that takes all of the checked radio buttons and pushes them into an array where it is added in the end. However, I would like to have one of the radio buttons take the attribute of the first radio button and multiply it by its own value.
I tried nesting an if statement inside of another if statement but it will only seem to add the values of the first if statement and ignore the second.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]").each(function() {
if ($(this).is(":checked")) {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * $('[name="gastronomy"]').attr("add-value")
).toString();
values.push($(this).val());
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
}
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>
When the condition is true you should use cateringFunc instead of $(this).val() when pushing into the values array and adding to totalPrice.
I assume you only want to get the added value from the selected radio button, so I added :checked to the selector. Then you also need to provide a default value if none of the gastronomy buttons are checked.
You shouldn't make up new attributes like add-value. If you need custom attributes, use data-XXX. These can be accessed using the jQuery .data() method.
$(".w-radio").change(function() {
var totalPrice = 0,
values = [];
$("input[type=radio]:checked").each(function() {
if ($(this).is('[name="catering"]')) {
var cateringFunc = (
$(this).val() * ($('[name="gastronomy"]:checked').data("add-value") || 0)
);
values.push(cateringFunc.toString());
totalPrice += cateringFunc;
}
values.push($(this).val());
totalPrice += parseInt($(this).val());
});
$("#priceTotal span").text(totalPrice);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="hack43-radio-group w-radio">
<input type="radio" name="gastronomy" value="0" data-add-value="10">0<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
<input type="radio" name="gastronomy" value="550" data-add-value="10">550<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="venue" value="0">0<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
<input type="radio" name="venue" value="10500">10500<BR>
</label>
<br>
<label class="hack43-radio-group w-radio">
<input type="radio" name="catering" value="0">0<BR>
<input type="radio" name="catering" value="40">40<BR>
<input type="radio" name="catering" value="45">45<BR>
<input type="radio" name="catering" value="60">60<BR>
</label>
<div class="hack42-45-added-value-row">
<div id="priceTotal">
<span>0</span>
</div>
</div>

Set hidden value based on radio button selection

Cannot find an answer:
I have searched Stack Overflow, however, despite finding lots of similar posts — and more complicated situations — I still couldn't find an answer to the issue I am trying to solve.
Here's my issue:
I have four radio buttons, and one hidden field:
<!-- My HTML Document -->
<form action="/my-doc.html" method="post">
<!-- The 4 Radio Buttons-->
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<!-- The Hidden Field -->
<input type="hidden" name="criteria" value="1">
<!-- My Submit Button -->
<input type="submit" name="action" value="Go">
</form>
What I need to do is set the value of <input type="hidden" name="criteria" value="1"> so that it is 0
Like this: <input type="hidden" name="criteria" value="0">
...but only after the user selects either the first, or second, radio button. The value of the hidden field should remain as being equal to 1 if any other radio button is selected.
How does a person do this using JavaScript?
Requirements: "Looking for a VanillaJS answer."
you can try below option
In javascript
function setValue() {
var selectedRadio = '';
var games = document.getElementsByName('game')
for (var i = 0; i < games.length; i++) {
if (games[i].checked) {
selectedRadio = games[i].value;
}
}
document.getElementById("hdnSelectedRadValue").value = (selectedRadio == "1" || selectedRadio == "2") ? "0" : "1";
return false;
}
Changes to do in HTML side
<body style="background-color: #f2f2f2;">
<form action="some.htm" method="post">
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="text" name="criteria" id="hdnSelectedRadValue">
<input type="submit" name="action" value="Go" onclick="setValue();">
</form>
</body>
var radios =
document.querySelectorAll('input[type=radio][name="game"]');
radios.forEach(radio => radio.addEventListener(
'change', () => {
document.getElementsByName("criteria")[0].value =
parseInt(radio.value, 10) > 2 ? '1' : '0';
}
));
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="hidden" name="criteria" value="1">
<input type="submit" name="action" value="Go">
You can simply listen to "change" events on all of the radio buttons, then just set the value accordingly.
Here's the snippet code I have written and tested
(function(){
let hdfValue = document.getElementById("myhiddenfield")
let radioButtons = document.querySelectorAll('input[name="game"]');
let submitButton = document.querySelector('input[name="action"]')
radioButtons.forEach((input) => {
input.addEventListener('change', function(e){
let radioButtonValue = e.target.value
if(radioButtonValue == 1 || radioButtonValue == 2){
hdfValue.value = 0;
} else {
hdfValue.value = 1;
}
});
});
submitButton.addEventListener("click", function() {
console.log(hdfValue.value)
});
})()
<form>
<input type="radio" name="game" value="1" checked> First
<input type="radio" name="game" value="2"> Second
<input type="radio" name="game" value="3"> Third
<input type="radio" name="game" value="4"> Fourth
<input type="hidden" name="criteria" id="myhiddenfield" value="1">
<input type="button" name="action" value="Go">
</form>

Radio button allow multiple selections

Can the radio button be implemented like a checkbox button? I hope radio buttion can multiple selection. Do not use checkbox button!
I want the effect as follows:
[0,1,2]
function clickButton() {
var radios = document.getElementsByName('gender');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
console.log(radios[i].value);
break;
}
}
}
<form id="Selection">
<input type="radio" name="gender" value="0" /> Male<br>
<input type="radio" name="gender" value="1" /> Female<br>
<input type="radio" name="gender" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>
You can give different names to the radio buttons, then grab the tags by tag name and push the values to an array.
PS: The correct way is to checkboxes because they are designed to do this functionality
Working Demo
function clickButton() {
var radios = document.getElementsByTagName('input');
var checked = [];
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
checked.push(radios[i].value);
}
}
console.log(checked);
}
<form id="Selection">
<input type="radio" name="gender1" value="0" /> Male<br>
<input type="radio" name="gender2" value="1" /> Female<br>
<input type="radio" name="gender3" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>
The only way to allow this would be to have unique names. The radio button is specifically meant for single select. If you want multi-select ability, then that is what checkboxes would be for.
<form id="Selection">
<input type="radio" name="gender_male" value="0" /> Male<br>
<input type="radio" name="gender_female" value="1" /> Female<br>
<input type="radio" name="gender_other" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>
Just use different names for your radio buttons -
function clickButton() {
var radios = document.getElementsByClassName('gender');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
console.log(radios[i].value);
}
}
}
<form id="Selection">
<input type="radio" class="gender" name="genderMale" value="0" /> Male<br>
<input type="radio" class="gender" name="genderFemale" value="1" /> Female<br>
<input type="radio" class="gender" name="genderOther" value="2" /> Other<br>
<button onclick="clickButton();return false;">submit</button>
</form>

jQuery multi-row form: disable submit until each row has a radio checked

I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>

PHP pass total value of radio button

How to count the total value of radio button within the same page and pass to another php file? The total will be count at this page and i can get the total from answer.php file.
<form action="answer.php" method="POST">
<input type="radio" name="q1" value="1" />Yes <br />
<input type="radio" name="q1" value="0" />No <br />
<input type="radio" name="q2" value="2" />Yes <br />
<input type="radio" name="q2" value="0" />No <br />
<input type="radio" name="q3" value="3" />Yes <br />
<input type="radio" name="q3" value="0" />No <br />
<input type="submit" value="submit" name="submit"/>
</form>
I suggest using an array to count your values.
<input type="radio" name="q[]" value="2" />
<input type="radio" name="q[]" value="3" />
<input type="radio" name="q[]" value="4" />
<input type="radio" name="q[]" value="5" />
This will result in $_POST['q'] being an array. You can now do:
echo "The total amount is ".array_sum($_POST['q']);
Using jQuery- it is easy, just iterate through the inputs and tally up the values. Note that I gave the form an Id so it can be targetted directly if you have other form. The total can be passed to your other page - either via AJAX or using a standard HTML form as a hidden field. Alternatively - since this is a form and you are already passing it to a PHP page - you could simply submit the form and tally up the $_POST variables on the other side.
$('#testForm input').on('change', function() {
var total=0;
$('input[type=radio]:checked', '#testForm').each(function(){
total += parseInt($(this).val());
})
alert(total)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm" action="answer.php" method="POST">
<input type="radio" name="q1" value="1" />Yes <br />
<input type="radio" name="q1" value="0" />No <br />
<input type="radio" name="q2" value="2" />Yes <br />
<input type="radio" name="q2" value="0" />No <br />
<input type="radio" name="q3" value="3" />Yes <br />
<input type="radio" name="q3" value="0" />No <br />
<input type="submit" value="submit" name="submit"/>
</form>
Commented version for the OP:
$('#testForm input').on('change', function() {//triggers the function on any change in the form
var total=0;//initialises the total at 0 so that each round ottallying up resets before the tally
$('input[type=radio]:checked', '#testForm').each(function(){//selects each input in the #testForm that is checked
total += parseInt($(this).val());//adds the value of each checked radio button to the tally
})
alert(total); //alerts the final tally after all iterations
});
You don't need jquery for this. Add a class to your radio buttons so we can query them without risking getting other elements in the page, something like "my-radio"
This javascript will get you the sum:
function getRadioButtonsSum(radioClass) {
var radioBtns = document.querySelectorAll(radioClass);
var count = 0;
var i;
for (i = 0; i < radioBtns.length; i += 1) {
if (radioBtns[i].checked) {
count += +radioBtns[i].value;
}
}
return count;
}
getRadioButtonsSum('.my-radio');

Categories

Resources