How to get the value of selected radio button - javascript

My HTML part is below:
<input id="yes" save-value="yes" value="no" name="view_y" class="switch-input yes" type="radio">
<label checked="checked" class="switch-label switch-label-off selected" for="yes">Yes</label>
<input id="no" save-value="no" value="no" name="view_n" class="switch-input no" type="radio">
<label class="switch-label switch-label-on" for="no">No</label>
<span class="switch-selection"></span>
When I click each button checked="checked" and selected options will be changing from yes to no labels.
With these options, how can I get the save-value of selected radio button. Since, am using Handlebars js (json) on my value option I want to get the save-value of selected radio button.
How an I do that?

Assuming the class switch-input is assigned to only these two input elements, you can use it along with the checked selector
var value = $('input.switch-input').filter(':checked').attr('save-value');
//or var value = $('input.switch-input:checked').attr('save-value');
Note: Prefer to use data-* attributes to store custom attributes
I think the radio buttons are not actually getting checked, only the labels attributes are changed so, add a additional class to the labels like myclass
<input id="yes" save-value="yes" value="no" name="view_y" class="switch-input yes" type="radio"/>
<label checked="checked" class="myclass switch-label switch-label-off selected" for="yes">Yes</label>
<input id="no" save-value="no" value="no" name="view_n" class="switch-input no" type="radio"/>
<label class="myclass switch-label switch-label-on" for="no">No</label>
<span class="switch-selection"></span>
then
var value = $('.myclass[checked="checked"]').prev('input').attr('save-value');
console.log(value)

First, your radio buttons should have the same name attribute, say view, so that the browser will restrict selection to only one of them. Then, you can use $('[name="view"]:checked').val() to capture the value of the radio button that is selected.

You have some errors in your HTML code, you put the checked attribute on the wrong tag, look in this example:
$('body').on('change','input',function() {
$('.switch-selection').html($(this).attr('save-value'));
});
http://jsfiddle.net/9Pj3g/2/

Related

Checkbox appear when certain radio selected

<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
</label>
<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
</label>
I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.
<label class="checkbox inline">
<input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
</label>
Can anybody tell me the best to do this?
Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.
Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.
if ($('input#largeDrive').is(':checked')) {
$('input#mappings').show(); //assuming it was hidden
}

How to check a single radio button using jquery/java script?

I would like to check only one radio button but in my code both radio buttons get selected.
Here is my code its in netsuite.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level_1" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>
here is the link of the site http://shopping.sandbox.netsuite.com/act
Please make the "name" of the radios be same for all.
<input value="<%=getCurrentAttribute('item','internalid')%>" type="radio" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"><label for="radio-2-1"></label>
<input value="INPUT" type="radio" id="radio-2-2" name="service_level" onclick="getAddonFromNetsuite(<%=getCurrentAttribute('item','internalid')%>, '<%=getCurrentAttribute('item','pricelevel5')%>');"/><label for="radio-2-2"></label>

how to select a radio button by clicking on an option and not the actual button itself

say i have the following three options and each with a radio button beside
London
Newyork
Dubai
I need jQuery that when the user clicks on the word the radio button selects!
This is a built-in feature in HTML, so no need for JavaScript. Simply use the label tag like this:
<label><input type="radio"> London</label>
<label><input type="radio"> New York</label>
<label><input type="radio"> Dubai</label>
Two ways:
<label for="london"><input type="radio" id="london"> London</label>.
Use label's for attribute similar to radio's id.
<label><input type="radio" > London</label>
Place the radio within label.
Very basic HTML.
You can use the label tag:
<input id="emptyacct" type="radio" name="account" value="radiobutton" />
<label for="emptyacct">Yes </label>
It's just HTML ;)
<input id="input_london" type="radio" name="london" value="radiobutton" />
<label for="input_london">London</label>
<input id="input_ny" type="radio" name="ny" value="radiobutton" />
<label for="input_ny">New York</label>
...

javascript/jquery- how to determine if a list/checkbox allows multiple values to be selected or not

I am trying to parse through a typical form using jquery. I want to obtain all details about the various fields in the form- viz field name, field type (eg radio/checkbox/list)...
How do I determine if a field allows multiple values to be selected? (eg in check box or list box)?
If this cannot be done using jquery, then can it be done using pure javascript? I already have with me a ref to the element for which this (whether multiple values are allowed or not) has to be determined...
Surround your control with some <div> as:
<div id="testCheck">
<input type="checkbox" checked="checked" value="1" />
<input type="checkbox" checked="checked" value="2" />
<input type="checkbox" checked="checked" value="3" />
<input type="checkbox" checked="checked" value="4" />
<input type="checkbox" checked="checked" value="5" />
<input type="checkbox" checked="checked" value="6" />
<input type="checkbox" checked="checked" value="7" />
<input type="checkbox" checked="checked" value="8" />
</div>
and check the selected or unselected elements using follwwing jquery code snippet. .size() will return the no of checked item and you can get the value of selected items by .val().
//Write your code when Document is loaded or some element click
$(document).ready(function() {
$("#testChk").click(function() {
alert($("#testCheck :checked").size());
//function to print the value of each checked checkboxes
$("#testCheck :checked").each(function() {
alert("value = " + $(this).val());
});
for more help follow these links:
How can I know which radio button is selected via jQuery?
have a look on jquery selector. you should watch bottom itms :password, :reset etc that you need to use.
http://api.jquery.com/category/selectors/
http://jquery-howto.blogspot.com/2008/12/how-to-check-if-checkbox-is-checked.html
Handling Checkboxes, Radio Buttons and Select Options in jQuery
Hope this help you little bit...

Javascript: Get selected radio and paste it on a label tag with jQuery

I have a gender selection radio:
<div class="label-inputs" name="userFieldDiv" id="genderUserFieldDiv">
<label class="required">Sexo</label>
<input type="radio" class="check" value="F" name="userDto.gender" id="userDto.gender0">
<label for="userDto.gender0">Femenino</label>
<input type="radio" class="check" checked="checked" value="M" name="userDto.gender" id="userDto.gender1">
<label for="userDto.gender1">Masculino</label>
</div>
I'm trying to use a jQuery script to get the selected radio and paste it inside of a label.
$("#userDto\\.gender").change(function() { $("#genderLabel").html(this.value); });
The problem is that I'm using Spring, and when I use formRadioButton, it generates the id: userDto.gender but adds a 0 and 1 to the options. So I'm out of ideas about how to make the next HTML to get the value of the selected radio.
<div name="userLabelDiv" id="genderUserLabelDiv">
<label class="required">Sexo</label>
<label id="genderLabel">Masculino</label>
</div>
Could someone guide me through the problem? I can't find where is my error in the JS code. Thank you
The ids must be unique so what Spring is doing is just fine. Just use the name attribute for the selector instead of the id.
$('input[name="userDto\\.gender"]').change( ... )

Categories

Resources