My page has about 25 radio button groups. When a radio button is selected in a group, I want to perform an action Specific to that group, and so need the NAME attrib of the radio group.
Take this HTML for example :
<div id="stackExchange">
<input type="radio" name="sofu_group" value="Stack Overflow">
<input type="radio" name="sofu_group" value="Meta Stack Overflow">
<input type="radio" name="sofu_group" value="Server Fault">
<input type="radio" name="sofu_group" value="Super User">
</div>
<!-- In no particular order - don't want to start a flame war ;) -->
If you wanted to deduce what group the clicked radio button belongs to you could use something like this :
// jQuery ver 1.7+
$("#stackExchange input:radio").on('click',function(){
var groupName = $(this).attr('name');
var groupElements = $(this).parent().find(":radio[name='"+groupName+"']");
});
Lets see whats going on here :
$("#stackExchange input:radio") - this selector will find us all of the input radio elements that are decendants of the #stackExchange element using the :radio selector. (Link to docs).
$(this).attr('name') - here is where we extract the name attribute of the selected radio element. (In our example - this becomes sofu_group).
$(this).parent() - In this case the variable $(this) refers to the radio element that was clicked - so we are selecting its parent - the #stackExchange element.
parent().find(":radio[name='"+groupName+"']") - this line will find all of the radio buttons held within the element that have a name attribute set to 'sofu_group'.
In the example - the variable $(this) refers to the radio element that was clicked.
This might give you some hint
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center"><br>
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> Wine<br>
</div>
</form>
</body>
</html>
call document.getElementsByName("group1").items(0).<propertyname>or<function>
Related
I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.
Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.
I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.
Here is the HTML:
<div class="radio">
<label>
<input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
New
</label>
<label>
<input type="radio" ng-model="optionsRadios" id="used" value="used">
Used
</label>
<label >
<input type="radio" ng-model="optionsRadios" id="broken" value="broken">
Broken
</label>
</div>
You have to use ng-checked="true" instead of checked
<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same
value and ng-model is checked automatically.
<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >
If the value of optionsRadio is "2" then second radio button will be selected automatically.
In Your Case:
When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.
Controller part:
$scope.optionsRadio = "new";
Form part:
<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >
First radio button will be selected automatically.
Note:
If value doesn't work u can use ng-value.
I am trying to add a custom method to validate a group of radio buttons, using v1.9 of the jQuery validate plugin.
Contrary to this post, it is possible to have the same name attribute for radio button inputs, as long as any class rules are only applied to one of the inputs. jQuery validate then treats your input group as a single input.
This works when your inputs are children of a common parent, ie
<input type="radio" name="radiogroup" value="1" class="input-shipping" checked="checked">
<input type="radio" name="radiogroup" value="2">
<input type="radio" name="radiogroup" value="3">
<input type="radio" name="radiogroup" value="4">
But as soon as the html structure changes, the validation rules are not applied:
<div class="form-row">
<input type="radio" name="radiogroup" value="1" class="input-shipping" checked="checked">
</div>
<div class="form-row">
<input type="radio" name="radiogroup" value="2">
</div>
<div class="form-row">
<input type="radio" name="radiogroup" value="3">
</div>
<div class="form-row">
<input type="radio" name="radiogroup" value="4">
</div>
Is anyone aware of a workaround for this issue? Class rules are added as follows:
$.validator.addClassRules({
"input-shipping" : {
required: true,
dateselected: true
}
});
$.validator.addMethod("dateselected", function(value, element) {
console.log(element);
});
The reason the validation rule was not being called was that custom radio buttons were used, which set the CSS display value of inputs to none, and pseudo elements were styled up in place of the original inputs.
Once this was changed to visibility:hidden; the validator seemed to pick up the rule OK.
To create a custom method based on the value of the selected input, a further level of filtering was needed:
$.validator.addMethod("dateselected", function(value, element) {
var radios = $('input[name='+element.name+']'),
val = radios.filter(':checked')[0].value;
console.log(val);
});
<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();"
I want to get the value of selected Radio Button on click of button I had written the code
function getValue () {
alert("Value is :"+$('input[name=animal]:checked').val());
}
But its not working and getting Undefined
Update:
I have used js of Jquery and jquerymobile
for jquery its for fine but as i am using it for mobile app so i need both the js library so in second case it didnot work.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
[Solved]
Hi I think you are getting the value without checking any radio button.
Load your page then select any one of radio button and then call getValue function
Alternatively you can put any radio button selected by default.
e.g.
replace first radio button with
<input type="radio" name="animal" id="cat" value="Cat" checked="true"/>
<label for="cat">Cat</label>
Try this
$("#myform input[type='radio']:checked").val();
OR
var myRadio = $('input[name=myRadio]');
//Use the filter() function, not find(). (find() is for locating child elements, whereas //filter() searches top-level elements in your selection.)
var checkedValue = myRadio.filter(':checked').val();
If the code is
<form>
<input type="radio" name="font"> Arial</input><br>
<input type="radio" name="font"> Times New Roman</input><br>
<input type="radio" name="font"> Monaco</input><br>
</form>
<script>
$('form input').each(function(i, e) {
alert($(this).text())
})
</script>
It shows 3 empty strings. How can it show the 3 names of fonts?
try it at: http://jsfiddle.net/bKhsp/3/
You can't have text inside an <input> tag - it's invalid HTML even though the browser will try to render it, if you want that you should use a <label> wrapper (which keeps the text clickable as well) like this:
<form>
<label><input type="radio" name="font" value="Arial"> Arial</label><br>
<label><input type="radio" name="font" value="Times New Roman"> Times New Roman</label><br>
<label><input type="radio" name="font" value="Monaco"> Monaco</label><br>
</form>
With a loop to match:
$('form input').each(function(i, e) {
alert($(this).parent().text()); //for the label text
alert($(this).val()); //for the input value
});
You can view the updated/working fiddle here. For postback reasons, you probably want a value on the inputs as well, so a value for font gets sent.
Inputs never have end tags, meaning to be correct, you'd have to have the following:
<form>
<input type="radio" name="font" /> Arial<br />
<input type="radio" name="font" /> Times New Roman<br />
<input type="radio" name="font" /> Monaco<br />
</form>
From there, you can take measures to tie the text with its respective radio button:
<form>
<input type="radio" name="font" id="fontArial"/><label for="fontArial">Arial</label><br />
<input type="radio" name="font" id="fontTimes"/><label for="fontTimes">Times New Roman</label><br />
<input type="radio" name="font" id="fontMonaco"/><label for="fontMonaco">Monaco</label><br />
</form>
<script type="text/javascript">
$('form label').each(function(i, e) {
alert($(this).text());
})
</script>
For grabbing the respective radio button from the label, simply take the for attribute for a selector id (for example this takes the value of a label's respective radio button):
$('#' + $(this).attr('for')).val();
The input element doesn't have a closing tag. Use a label around the radio button and text, then the text is clickable as it should be:
<form>
<label><input type="radio" name="font"/><span>Arial</span></label><br>
<label><input type="radio" name="font"/><span>Times New Roman</span></label><br>
<label><input type="radio" name="font"/><span>Monaco</span></label><br>
</form>
Putting the text in a span is a good idea, then you can target it separately so that you can style it with CSS.
Use the next function to reach the text from the input:
$('form input').each(function(i, e) {
alert($(this).next().text())
});
You should use a <label> element and specify the id of the input element in its for attribute, that way when you click on the text it will check the radio input for you. As Nick Craver mentioned, you can't have text nodes inside an input element.
You can use nextSibling to get the text node following an element, then access its nodeValue property for the text:
$('form input').each(function(i, e) {
alert(this.nextSibling.nodeValue);
});
This should also be more efficient than solutions that wrap this with jQuery. You can also use this.value to get the value without wrapping and calling .val().
Updated fiddle at http://jsfiddle.net/AndyE/bKhsp/6/.
The HTML markup is incorrect. Each option needs a value:
<form>
<input type="radio" name="font" value="Arial"> Arial <br>
<input type="radio" name="font" value="Times New Roman"> Times New Roman<br>
<input type="radio" name="font" value="Monaco"> Monaco<br>
</form>
Your jQuery can then look something like this (from memory):
$('form input').each(function(i, e) {
alert($(this).val());
})