if (document.querySelector("input[name='maca']")).getAttribute("checked")
<input type="radio" name="maca" id="maca1">
<input type="radio" name="maca" id="maca2">
I want to check if any one of the input type radio buttons with the same name is checked.
Select every radio button with that name with querySelectorAll, then use Array.some to check whether one of the items in the list is checked:
const radioButtons = document.querySelectorAll('input[name="maca"]')
const oneChecked = [...radioButtons].some(e => e.checked)
console.log(oneChecked)
<input type="radio" name="maca" id="maca1">
<input type="radio" name="maca" id="maca2" checked>
Alternatively, you can try selecting the checked radio button (with the :checked pseudo-class) and see if an element was selected:
if(document.querySelector('input[name="maca"]:checked')){
console.log('checked')
}
<input type="radio" name="maca" id="maca1">
<input type="radio" name="maca" id="maca2" checked>
Related
Is it possible to count all selected radio to a certain value?
I have done this:
if($('.giornal:checked').val() == 'option1'.length == 1) {
// something
}
You can get all radio buttons checked as you shared in your question then filter array matching specific value(here "1") and get length
var res = $("input[type=radio]:checked").filter(function(){
return "1"==$(this).val()
})
console.log(res.length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" checked value="1"/>
<input type="radio" checked value="1"/>
<input type="radio" checked value="3"/>
<input type="radio" value="4"/>
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.
So I have dynamic form that I create and there could be multiple sets of radio inputs they all do have the same name Release[] but I do not know how to group the properly now if you will add 4 sets of those radio inputs you will be only able to select 1 from all of them
$('a#AddChampion').on('click', function () {
$('div#ChampionInput').append(
'<input type="radio" name="Release[]" value="New">New\
<input type="radio" name="Release[]" value="Rework">Rework\
<input type="radio" name="Release[]" value="None" checked>None\
');
});
Yes if you intend to use the same name only one output can be obtained. If you want to collect them separately you will have to use separate names.
E.g.
For two groups of ReleaseGrp1 and ReleaseGrp2
<input type="radio" name="ReleaseGrp1" value="New">New
<input type="radio" name="ReleaseGrp1" value="Rework">Rework
<input type="radio" name="ReleaseGrp1" value="None" checked>None
<input type="radio" name="ReleaseGrp2" value="New">New
<input type="radio" name="ReleaseGrp2" value="Rework">Rework
<input type="radio" name="ReleaseGrp2" value="None" checked>None
Put tags input type = "radio" with its attribute data-group:
<input type="radio" id="id1" data-group="group1">
<input type="radio" id="id2" data-group="group1"><br>
<input type="radio" id="id3" data-group="group2">
<input type="radio" id="id4" data-group="group2"><br>
How at all elements of input type="radio", which is data-group "group1", set the checked=false?
You can use the attribute selector:
$('input[type="radio"][data-group="group1"]').prop('checked', false);
Or filter():
$('input[type="radio"]').filter(function() {
return $(this).data('group') == 'group1';
}).prop('checked', false);
The best way to group radio buttons is to use the name attribute; the browser will then group them together for you, unchecking others when you check another member of the same group. That's the purpose of input[type=radio]:
<input type="radio" id="id1" name="group1">
<input type="radio" id="id2" name="group1"><br>
<input type="radio" id="id3" name="group2">
<input type="radio" id="id4" name="group2"><br>
And if you wanted to make all of the name="group1" ones unchecked, then:
$("input[type=radio][name=group1]").prop("checked", false);
But if you want to use your current structure, and you're asking how to set them all unchecked, then you can use an attribute selector:
$("input[type=radio][data-group=group1]").prop("checked", false);
<input type="radio" name="red" value ="red" onclick="myFunction(this.value);"id="chkbx" /> Red<br>
<input type="radio" name="green" value ="green" onclick="myFunction(this.value);"id="chkbx" > green<br>
<input type="radio" name="yellow" value ="yellow " checked onclick="myFunction(this.value);"id="chkbx" > yellow<br>
<input type="radio" name="orange" value ="orange" onclick="myFunction(this.value);"id="chkbx" > orange<br>
<input type="radio" name="blue" value ="blue" onclick="myFunction(this.value);"id="chkbx" > blue<br>
<p id="demo"></p>
button onclick="myfunction(this.value)">My Choice</button>
<br><br>
<p id="demo"></p>
<script>
function myFunction(chkbx)
{
if(chkbx.checked)
{
chkbx.checked = false;
}
else
{
chkbx.checked = true;
}
The Thing is " I want to get the colour from radio button apply to a text in output screen(at a time one radio button would be select).What can i do. Please give some idea. i am new to javascript. I want in javascript only.
.Value will return you the value:
function myFunction(chkbx)
{
if(chkbx.checked)
{
alert(chkbx.value);
}
}
Give all the radio buttons in the group the same name.
Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
So to solve your issue, you can do as belows.
<p><input type="radio" name="color" value ="red"><i>Red</i></p>
<p><input type="radio" name="color" value ="green"><i>Green</i></p>
<p><input type="radio" name="color" value ="yellow" checked><i>Yellow</i></p>
<p><input type="radio" name="color" value ="orange"><i>Orange</i></p>
<p><input type="radio" name="color" value ="blue"><i>Blue</i></p>