JQuery: get radio button value - javascript

I have the following HTML:
HTML:
<input type="radio" name="abc" value="0" selected="selected" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+
JQuery to get the selected radio button
$('input:radio[name=abc]:checked').val();
Why doesn't the code above work on page load, BEFORE a user selected a radio button? It's strange because the code above does work AFTER a user selected a radio button.
It seems to me that I have set the default radio button value to be 0, but if you
Meaning, if the radio button value is selected, return the selected value - otherwise, return 0 (when no value has been selected)

You are using the wrong attribute. For radio buttons you have to use the checked attribute and not the selected attribute.
<input type="radio" checked="checked">
or just:
<input type="radio" checked>

First correct the attribute to checked and remove selected attribute which is wrong and then use the following code.
t will get the selected value of the radiobutton at button click.
ex for list
$("#btn").click(function() {
$('input[type="radio"]:checked').val();
});

Radio has the attribute checked, not selected
<input type="radio" name="abc" value="0" checked="checked" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+

Related

Make one radio button select another radio button

I am building a form with 8 radio buttons, 4 for System A and 4 for System B. The options for the radio buttons are CF, ISO, ISO-B, and NW. I want to make it so that when a customer selects a radio button for System A, the same button is selected on System B.
How do I make whatever I select in System A's radio buttons simultaneously selected in System B's radio buttons?
What I am basing it off of
You could use a databinding framework like ReactJS to do this nicely, but here's a basic jQuery example that would work. Just listen to the "change" event on your first set of radio buttons, then use jQuery to select the appropriate radio button from the second set.
$( function() {
$("input[name='system-a']").on("change", function(e) {
var newValue = e.target.value;
$("input[name='system-b'][value='" + newValue + "']").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h2>System A</h2>
<input type="radio" name="system-a" value="1">Option 1</input>
<input type="radio" name="system-a" value="2">Option 2</input>
<input type="radio" name="system-a" value="3">Option 3</input>
<input type="radio" name="system-a" value="4">Option 4</input>
</div>
<div>
<h2>System B</h2>
<input type="radio" name="system-b" value="1">Option 1</input>
<input type="radio" name="system-b" value="2">Option 2</input>
<input type="radio" name="system-b" value="3">Option 3</input>
<input type="radio" name="system-b" value="4">Option 4</input>
</div>
$("input[type='radio']").on("click",function(){
var Name= this.name == "SystemA"?"SystemB":"SystemA";
$("input[name='"+Name+"'][value='"+this.value+"']").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>System A</span>
<br>
<input type="radio" name="SystemA" value="CF"/><lable>CF</lable>
<input type="radio" name="SystemA" value="ISO"/><lable>ISO</lable>
<input type="radio" name="SystemA" value="ISO-B"/><lable>ISO-B</lable>
<input type="radio" name="SystemA" value="NW"/><lable>NW</lable>
<hr>
<span>System B</span>
<br>
<input type="radio" name="SystemB" value="CF"/><lable>CF</lable>
<input type="radio" name="SystemB" value="ISO"/><lable>ISO</lable>
<input type="radio" name="SystemB" value="ISO-B"/><lable>ISO-B</lable>
<input type="radio" name="SystemB" value="NW"/><lable>NW</lable>

How to get the value of an input and assign a label which he has no association

I'm improving my website, and it has the following dropdown where some can choose the sex:
<h2>Person Sex</h2>
<label for="sex"></label>
<select id="sex">
<option id="men">Men</option>
<option id="women">Women</option>
</select>
Perfect. To send to my backend is very simple, i just I get the value of #sex id and send too the backend through a ajax.
Now, i want use checkbox's:
<h1>Person Sex</h1>
<label for="men">Men</label>
<input type="radio" id="men"/><br/>
<label for="women">Women</label>
<input type="radio" id="women"/>
My question is: how can i associate the women or the men to only a label called sex? And how can i make impossible to choose both.
Thanks.
Use the name and value attributes of the inputs:
<label for="men">Men</label>
<input type="radio" id="men" value="men" name="sex" /><br/>
<label for="women">Women</label>
<input type="radio" id="women" value="women" name="sex" />
The name field on radio buttons allows them to be grouped. When submitting the form, the value of the selected item should be the value of the response for sex. For example, $sex = $_POST["sex"]; in PHP.
If you want a default value for your radio button group:
<input type="radio" id="women" value="women" name="sex" checked="checked" />
Add a name that is the same in both radio buttons. That way, only one can be chosen.
<h1>Person Sex</h1>
<label for="men">Men</label>
<input type="radio" id="men" name="sex"/><br/>
<label for="women">Women</label>
<input type="radio" id="women" name="sex"/>

Enabling and disabling checkboxes with javascript

I have been trying to figure out the solution to my problem for a few hours now. I'm still fairly new to Javascript, so please forgive me if I sound stupid. Sadly I don't know jQuery and I'm starting to think that it's inhibiting me to come up with a solution.
What I am trying to do is have a check box that enables disabled radio buttons. If that makes sense.
Example:
Choice 1
sub choice
sub choice
sub choice
I would like to be able to click the first checkbox (Choice 1) to enable the sub choices. If it's not clicked, the sub choices should be disabled. :-)
Here is what I've got so far:
<script>
function enableRadios(x) {
var formElement = eval("checkbox" + x)
if (formElement[0].disabled) {
formElement[0].disabled = false
formElement[1].disabled = false
} else {
formElement[0].disabled = true
formElement[1].disabled = true
}
}</script>
<body><input type="checkbox" name="main" value="main" onClick="enableRadios(x)">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x"></body>
I really appreciate your help!
You need to pass a string containing the radio name 'x', not pass a variable x:
<script>
function toggleRadios(name) {
var elems = document.getElementsByName(name);
for(i=0; i<elems.length; i++) {
elems[i].disabled = !elems[i].disabled;
}
}
</script>
<input type="checkbox" name="main" value="main" onclick="toggleRadios('x')">
<input disabled type="radio" value="1" name="x">
<input disabled type="radio" value="2" name="x">
<input disabled type="radio" value="3" name="x">
<input disabled type="radio" value="4" name="x">
<input disabled type="radio" value="5" name="x">
<input disabled type="radio" value="6" name="x">
http://jsfiddle.net/samliew/B6tF7/

how to select only one checkbox using jquery?

I am using checkbox in the asp.net gridview. I want select only one checkbox at time. if I select one checkbox other checkboxes should be deselected.
I have html view source
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"
Usually radio buttons are used for the exclusive functionality where only one item in a group is selected and the browser will do taht for you automatically with the right HTML.
For checkboxes, you could code it with jQuery like this:
<div class="checkboxContainer">
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"> Item 1<br>
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"> Item 2<br>
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl04_ctl02_ctl00_ChkID" type="checkbox"> Item 3
</div>​
$("input[type='checkbox']").change(function() {
$(this).closest(".checkboxContainer").find("input[type='checkbox']").not(this).prop("checked", false);
$(this).prop("checked", true);
});
​
Working Demo: http://jsfiddle.net/jfriend00/hWEXx/
Here's the pure HTML way of doing exclusive radio buttons (also in that same demo):
<div class="radioGroup">
<input type="radio" name="group1">Item A<br>
<input type="radio" name="group1">Item B<br>
<input type="radio" name="group1">Item C<br>
</div>
Use a radio button instead of a checkbox.
<form>
<input type="radio" name="parents" value="Mom" /> Mom<br />
<input type="radio" name="parents" value="Dad" /> Dad
</form>
in asp.net you should use radiobuttons instead checkboxes (in this case)
<div class="group">
<asp:RadioButton Id="radio1" runat="server" GroupName="radioGroup" />
<asp:RadioButton Id="radio2" runat="server" GroupName="radioGroup" />
</div>
GroupName attribute make this functionality you need. (If radio1 is Checked the radio2 is automatically unchecked.
hope this help:)

change field value when select radio buttons

I want to change the value of hidden input field when radio buttons selected :
<input type="radio" name="r1" value="10" />10
<br/>
<input type="radio" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
for example when user click on one the buttons the value of hidden field change to that value.
Use the onClick property:
<input type="radio" name="r1" value="10" onClick="document.getElementById('hidfield').value=this.value"/>10
<br/>
<input type="radio" name="r1" value="45" onClick="document.getElementById('hidfield').value=this.value"/>
45
<br/>
<input type="hidden" name="sum" value="" id="hidfield" />
You can try for example
<input type="radio" id="radio1r1" name="r1" value="10" />10
<br/>
<input type="radio" id="radio2r1" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
jQuery("input[id^='radio']").click(function() {
jQuery("input[name='sum']").val(jQuery(this).val());
}
So then when user click on each radio we handle it by various id with same start.
Using jQuery it would be:
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='sum']").val() = inputValue;
$(":hidden[name='sum']").name() = "lalala";
});
I've not double checked that code so it might need a little tweaking.
hook into the onclick event for the radio button "r1". Normally I'd suggest the onchange event but in IE it isn't fired until the user "blurs" the radio button.
If you are using a framework like jQuery, hook in the events in a nice unobtrusive manner... but if you want a quick n dirty solution, just add the events inline.
<input type="radio" name="r1" value="10" onclick="doIt(this);"/>10
<br/>
<input type="radio" name="r1" value="45" onclick="doIt(this);"/>45
<br/>
<input type="hidden" name="sum" value="" />
<script>
function doIt(obj){
//alert('my value is now: ' + obj.value);
obj.form.elements['sum'].value = obj.value;//set hidden field to radio value
}
</script>

Categories

Resources