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 :)
Related
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">
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.
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler
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(...)
I need to get the class attribute of checked radio button, with name="radio".
Used the code that's working fine in Firefox, but fails in IE.
val = $('input:radio[name=radio]:checked').attr('class');
How can i accomplish this?
There is no psuedo-class :radio. I think you meant [type=radio].
As comments says, I think you should use type instead of name. But i think you have named your input as radio because you can find this specific input. If you just use type selector you will catch every single selected radio input on page.
<input type="radio" name="radio" class="ey" /> Male<br />
So, if your page have more forms, you should specify a parent or form to avoid conflicts. Set a id for your form and try to find it by form id and radio type like this:
<form id="myForm">
<input type="radio" name="radio" class="ey" /> Male<br />
</form>
val = $("#myform input[type='radio']:checked").attr('class');
I hope it can help you :)