How to get value of selected radio button?
var rates = document.getElementById('rates').value;
The rates element is a div
, so it won't have a value. This is probably where the undefined
is coming from.
The checked
property will tell you whether the element is selected:
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
Or
$("input[type='radio'][name='rate']:checked").val();
Set selected radio from radio group with a value
With the help of the attribute selector you can select the input element with the corresponding value. Then you have to set the attribute explicitly, using .attr
:
var value = 5;
$("input[name=mygroup][value=" + value + "]").attr('checked', 'checked');
Since jQuery 1.6, you can also use the .prop
method with a boolean value (this should be the preferred method):
$("input[name=mygroup][value=" + value + "]").prop('checked', true);
Remember you first need to remove checked attribute from any of radio buttons under one radio buttons group only then you will be able to add checked property / attribute to one of the radio button in that radio buttons group.
Code To Remove Checked Attribute from all radio buttons of one radio button group -
$('[name="radioSelectionName"]').removeAttr('checked');
How to get the selected radio button’s value?
You can do something like this:
var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // do whatever you want with the checked radio alert(radios[i].value);
// only one radio can be logically checked, don't check the rest break; }}
<label for="gender">Gender: </label><input type="radio" name="genderS" value="1" checked="checked">Male</input><input type="radio" name="genderS" value="0">Female</input>
Getting the value of a checked radio button using javascript
function getValue() { var value = document.querySelector('input[name="style"]:checked').value; console.log(value);}
<form> <input type="radio" name="style" value="3" checked> <input type="radio" name="style" value="5"> <input type="radio" name="style" value="10"> <button type="button" onclick="getValue()">click</button></form>
Javascript Get Selected Radio Button Values
You can use radio.getAttribute('data-price')
to get the price of the pizza and radio.value
to get the size of the pizza. Also note that you can avoid using [].slice.call
by using [].filter.call
on your NodeList.
var name = 'Cheese'
function addBasket(button) { var nodes = document.getElementsByName(button.name) var radio = [].filter.call(nodes, function(e) { return e.checked })[0]
var pizzaname = button.name var pizzadesc = button.getAttribute('data-description')
var pizzasize = radio.value var pizzaprice = radio.getAttribute('data-price')
console.log({ Name: pizzaname, Description: pizzadesc, Size: pizzasize, Price: pizzaprice })}
<td> <table border="0" cellpadding="0"> <tbody> <tr align="center"> <td> <input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small </td> <td> <input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium </td> <td> <input name="Cheese" data-price="9.99" value="Large" type="radio">Large </td> </tr> <tr align="center"> <td style="padding-top: 6px">£6.50</td> <td style="padding-top: 6px">£8.50</td> <td style="padding-top: 6px">£9.99</td> </tr> </tbody> </table></td><td> <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)"></td>
How to get selected radio button values?
$(document).ready(function() { $('input:radio').change(function() { var is_external = $("input[name='is_external']:checked").val();//name is is_external not radio alert("selected values: " + is_external); //Return undefined
});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="exter_inter"> External <input type="radio" name="is_external" value="1" />Internal <input type="radio" name="is_external" value="0" /></div>
How to get the value of the selected radio button?
In your radio button, analyze the parameters that you are passing:
gumb1 = Radiobutton(root,
text = "Euro",
value = "Euro",
variable = "btn2"
The parameters value
and variable
are what stores the data of the radio button. You've set your value
option correctly. The interpreter will automatically set the variable
with the value
when the radio button is selected.
But here's where your issue is:
variable = "btn2"
"btn2"
is a string. Not very useful though, is it? In fact, you're trying to perform methods on it that don't even exist. Such as here:
def funkcija():
X = btn2.get()
In fact, taking this information, you almost got there!
At the top of your script, you need to set btn2
to Tkinter's StringVar
, like so:
from tkinter import *
btn1 = StringVar()
btn2 = StringVar()
Now that's done, let's change our parameters in our radio buttons.
gumb1 = Radiobutton(root,
text = "Euro",
value = "Euro",
variable = btn2
Now, Tkinter will automatically update the variable when it is selected. To get the value, do the same that you had done in your funkcija
.
X = btn2.get()
And then the value of btn2 (which was updated by the radio buttons) will not be read, and stored into the variable X
.
How to get selected radio button values in multiple radio button using Vuejs.?
Mybe something like following snippet:
new Vue({
el:"#demo",
data() {
return {
product_details: [{title: "Color", details: [{name: "Red", value: "red",}, {name: "Green", value: "green",}, {name: "Yellow", value: "yellow",},],}, {title: "Size", details: [{name: "Small", value: "small",},{name: "Large", value: "large",},],},],
products: [{name: 'Product 1', Color: 'red', Size: 'large'}, {name: 'Product 2', Color: 'green', Size: 'small'}]
}
}
})
.cont, .optionalitem, .input-group {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(product, i) in products" :key="i">
<h3>{{ product.name }}</h3>
<form @submit.prevent="submit">
<div v-for="(variants, index) in product_details" :key="index" class="cont">
<p><b>Choose {{ variants.title }}</b> - </p>
<div class="input-group mt-2 increasenumber">
<div
class="optionalitem"
v-for="(detail, index1) in variants.details"
:key="index1 + variants.title"
>
<input
type="radio"
:id="index + '_' + index1"
class="newoneche"
:value="detail.value"
v-model="products[i][variants.title]"
/>
<label :for="index + '_' + index1" class="select01">
<p class="highlight">
{{ detail.name }}
</p>
</label>
</div>
</div>
</div>
{{product}}
<button color="success">Submit</button>
</form>
</div>
</div>
Related Topics
Can Scripts Be Inserted With Innerhtml
Why Calling Setstate Method Doesn't Mutate the State Immediately
Adjust Width and Height of Iframe to Fit With Content in It
Determine If an HTML Element'S Content Overflows
Browser Detection Versus Feature Detection
How to Detect Ctrl+V, Ctrl+C Using JavaScript
Double Quote in JavaScript String
Browser/Html Force Download of Image from Src="Data:Image/Jpeg;Base64..."
Capture Iframe Load Complete Event
How to Make HTML Element Resizable Using Pure JavaScript
How to Change the Href Attribute For a Hyperlink Using Jquery
How to Retrieve an HTML Element'S Actual Width and Height
Is It Wrong to Place the ≪Script≫ Tag After the ≪/Body≫ Tag
How to Have an Element With an Id That Starts With a Number
Adding Input Elements Dynamically to Form