Develop Reference

my dynamically populated radio button group gets more than one item checked. so how to solve this.?using HTML,CSS,JS; C#(backend)

my dynamically populated radio button group gets more than one item checked. so how to solve this.?using HTML,CSS,JS; C#(backend).
i wrote a code for list of items with input type as "radio". the values of list item is stored in a Arraylist in backend i.e C#. but when i try to run the code, more than one radio button gets selected.
please help me solve my issue. and even how to check which radio value is selected and how to pass the checked radio value to backend or server.
HTML code
<div class="demo-container size-thin">
<div class="RadListBox RadListBox_Silk" >
<div class="rlbGroup">
<ul>
<%
foreach (var item in dataname)
{
%>
<li>
<input type="radio" />
<img alt="" src="Images/<%=item %>.png"> <%= item%></li>
<%
}
%>
</ul>
</div>
</div>
</div>
Sample frontend visual
i have not writeen any javascript code as of now.

To be clearer than the other answers. All radio buttons in a group must have identical values for their name attribute. This is what groups them together. It's their value attribute that is used to give each button its individual meaning.
Additionally, the name attribute is necessary for any/all form elements that are supposed to submit their value during the submit event. If an element doesn't have the name attribute, it won't send its data.
Once you've made this change, you don't have to worry about how to send the checked radio button's value to the backend server because that will be done automatically when the form that the radio button is in gets submitted.
// Get reference to parent element of first radio button group
var parent = document.querySelector("fieldset:first-child");
// Set up click event handler for it
parent.addEventListener("click", function(e){
// Check to see if the originator of the event was a radio button
if(e.target.nodeName === "INPUT" && e.target.getAttribute("type") === "radio"){
// Get a reference to the checked radio button
console.log("Checked radio button is: " +
document.querySelector("input[type=radio][name=testGroup1]:checked").value);
}
});
<fieldset>
<legend>Group 1</legend>
<label> Choice A<input type="radio" name="testGroup1" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup1" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup1" value="C"></label>
</fieldset>
<fieldset>
<legend>Group 2</legend>
<label> Choice A<input type="radio" name="testGroup2" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup2" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup2" value="C"></label>
</fieldset>

You need to give a name to it
<input type="radio" name="myRadio">
this way the radio know which "group" is it from
input radio

#Sourav,
First, we've to set the name of that radio button.
<input type="radio" name="nameOfThisField">

jquery mobile: get selected radiobutton

I'm not sure how can I get the selected radio button in jQuery mobile (I'm using version 1.4.3). The checked attribute doesn't change whenever I click one of the radio buttons. Actually, when I inspect the elements I see that only attribute data-cacheval is changing. Is it safe to use this attribute to get the selected radio button? This is the code I'm using for the radio buttons:
<input type="radio" name="chkViewType" id="chkViewType2" data-mini="true">
<label for="chkViewType2" data-mini="true">List</label>
<input type="radio" name="chkViewType" id="chkViewType1" data-mini="true">
<label for="chkViewType1" data-mini="true">Map</label>

You can use the :checked selector:
e.g.
$("[name='chkViewType']:checked")
Also, you should probably read the Attributes vs. Properties paragraph in the documentation.

validate field in javascript and jquery

I have four radio buttons. If I select the last radio button then one textbox is appearing. I handled this scenario by jquery. Now I want to validate in such a way that if user gets this textbox means if user checked the last radio button, then he should provide some text.But in my case, if I check any one of the radio button, its telling to provide some text. The code is like:
<input type="radio" name="bus_plan" id="smallBtn" value="1" />1
<input type="radio" name="bus_plan" id="smallBtn" value="2" />2
<input type="radio" name="bus_plan" id="smallBtn" value="3" />3
<input type="radio" name="bus_plan" id="smallBtn" value="Promotional" />
<span class="plantxt"><a style="cursor:pointer;" onclick="popup('popUpDiv')">Promotional Plan</a> (Please enter a promotional code)</span>
<div class="reg-line" id="pr_code_id" style="display:none">
<div class="reg-linea" align="left">Promotional Code: <sup>*</sup></div>
<input type="text" name="bus_prcode" id="bus_prcode" class="reg-line-input" value="Promotional Code" onblur="if(this.value=='') this.value='Promotional Code'" onClick="if(this.value==this.defaultValue) this.value='';" />
<br />
<div>
<div id="promotionalbox" style="display:none;font-size:13px;clear:both"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input:radio[name=bus_plan]").click(function(){
var values = $(this).val();
if(values == 'Promotional'){
$('#pr_code_id').show();
}else{
$('#pr_code_id').hide();
}
});
});
</script>
and in js if I alert the value of document.getElementById('bus_prcode').value then always it is showing Promotional code, which is only for last radio button value.

Your code is a bit of a mess which is the root of this problem. Remember, one element per ID.
You may also find it helpful to look at jQuery .is(), for example:
$('input[value="Promotional"]').is(':checked')
n.b. I do not suggest the above, you should use identifiers in the appropriate way first.
Also worth noting that your code works fine for me using Chrome. See an example (which I have expanded for you) here: http://jsbin.com/ofujal/3/

You should not have an element with the same ID (your radio buttons). Also, you're getting the textbox by running document.getElementById('bus_prcode') and not the radio button. You should give a unique ID to your last radio button, e.g. btnPromotional, then bind click to it:
$("#btnPromotional").click(...)

list of radiobutton lists - only allow one to be selected

I have multiple radiobutton lists within a fieldset tag.
I only ever want one item to be selectable from the whole list...
currently i can select one item from each radio button list - which is normal
I know the proper way would to do this would be to have one long radio button list, but that is not an option.
Is there a way in javascript/jquery that given the fieldset class name - say
<fieldset class="mylistofradiolists"> that when a radio button within it is selected all other items are deselected and only that single one remains selected
Thanks

You can do that with the following code
$radios = $('.mylistofradiolists :radio');
$radios.on('change',function(){
$radios.not(this).prop('checked',false);
});
When an radio is selected all other radio's except that are deselected within that container.
It's better to use
$radios = $('.mylistofradiolists [type=radio]');
Instead of
$radios = $('.mylistofradiolists :radio');
As the doc for :radio selector says
Because :radio is a jQuery extension and not part of the CSS
specification, queries using :radio cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method.
For better performance in modern browsers, use [type="radio"]
instead.

You can achieve the functionality of selecting only one radio button from list of radio buttons which are seperated by fieldset tag by keeping each "name" attribute of the radio button same.
e.g :- for first field set - keeping the radio button name field same.
<fieldset >
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<fieldset >
and for second fieldset , keeping the name attribute same :-
<fieldset >
<input type="radio" name="food" /> : Indian<br />
<input type="radio" name="food" /> : UK<br />
<fieldset >
Hope this anser user question :)

Radio input and alert in Javascript

I need some help.
I have program that changes table values based on user input in radio box
similar to this page:
clicky
But the problem is I want users to select the radio input only once; if they select another
radio then values of tables get messed up.
So what I want to know is how can I make an alert box when user selects the radio input twice?
Similar to this website clicky try clicking radio button twice and alert popsup.
Please can anyone help?

It's difficult to prevent an event on a radio button input node without bringing in help from outside libraries. A simple solution is to just disable the buttons from within an onclick function attached to each input node. Like so: http://jsfiddle.net/c73Mh/ . If they still need to be able to select the radio buttons for whatever reason, you can cancel the selection by selecting the button that was initially selected from within that same function. Hope this helps!

For simplicity in my example I'm assuming that the id of each radio button is a combination of the name and value attributes. In addition to what I've given you below you will need to add a reset() function of some kind that sets selectedValues = {}; and deselects all radio buttons.
<input type="radio" name="group1" value="A" id="group1A" onclick="radioClicked(this);" />First option
<input type="radio" name="group1" value="B" id="group1B" onclick="radioClicked(this);" />Second option
<input type="radio" name="group2" value="A" id="group2A" onclick="radioClicked(this);" />First option
<input type="radio" name="group2" value="B" id="group2B" onclick="radioClicked(this);" />Second option
var selectedValues = {};
function radioClicked(rb) {
if (selectedValues[rb.name] === undefined) {
selectedValues[rb.name] = rb.value;
doTableProcessing();
}
else {
alert("You can't change the selected values");
document.getElementById(rb.name + selectedValues[rb.name]).checked = true;
}
}