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"/>
Related
How to Verify all radio groups have at least 1 value selected using a generic selector and the .each() function.
All the examples I find require the id or name of the single radio options to be used not the group.
Try this:
const radios = {};
$('input[type="radio"]').each((i, e) => {
let $radio = $(e);
if ($radio.is(':checked')) {
radios[$radio.attr('name')] = $radio.val();
}
});
console.log(radios);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="radio" value="1" name="ri1">
<input type="radio" value="2" name="ri1" checked="checked">
<input type="radio" value="3" name="ri1">
<input type="radio" value="1" name="ri2">
<input type="radio" value="2" name="ri2">
<input type="radio" value="3" name="ri2" checked="checked">
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>
I am trying to get an array of selected checkboxes values and text on button click
<input type="checkbox" name="checkbox[]" value="1" /><label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" /><label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" /><label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" /><label>text4</label>
I'm getting values of the checkboxes but how to get text also in array
var checkboxes = document.getElementsByName('checkbox[]');
var vals = 0;
for (var i=0, n=checkboxes.length;i<n;i++) {
if (checkboxes[i].checked) {
vals += ","+checkboxes[i].value;
}
}
Thank you!
You can use map() to create an array of the values you require:
var labelValues = $(':checkbox:checked').map(function() {
return [ $(this).next('label').text(), this.value ];
}).get();
However given your desired output it would make more sense to create an object with the labels as the properties, something like this:
var obj = {};
$(':checkbox:checked').each(function() {
obj[$(this).next('label').text()] = this.value;
});
-- 2021 Update --
You can now simplify the map() call using an ES6 arrow function. In addition you could combine the checkbox value and label text in to an array of objects, like this:
$(':checkbox').on('change', () => {
let labelValues = $(':checkbox:checked').map((i, el) => ({
value: el.value,
text: el.nextElementSibling.textContent
})).get();
console.log(labelValues);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox[]" value="1" /><label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" /><label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" /><label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" /><label>text4</label>
#Rory's answers is good to return both value and text into a single array. But as the OP is asking to return value and text into separate arrays, I would propose the following way to do that.
All you have to do is to use 2 arrays to get separate values from text.
Working JSFiddle here.
Run the below snippet to see the output in the console.
This example will return:
Selected checkbox Values in an array
Selected checkbox texts in an array
Selected checkbox in an array (In case if you want it)
var selectedCheckBoxValue = [];
var selectedCheckBoxText = [];
var selectedCheckBox = $(':checkbox:checked').map(function(i) {
selectedCheckBoxValue[i] = this.value;
selectedCheckBoxText[i] = $(this).next('label').text();
return this;
}).get();
//Selected Checkboxes Value in a seperate Array
console.log(selectedCheckBoxValue);
//Selected Checkboxes Text in a seperate Array
console.log(selectedCheckBoxText);
//Selected Checkboxes element in a seperate Array
console.log(selectedCheckBox);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="checkbox" name="checkbox[]" value="1" checked="true" />
<label>text1</label>
<input type="checkbox" name="checkbox[]" value="2" checked="true" />
<label>text2</label>
<input type="checkbox" name="checkbox[]" value="3" />
<label>text3</label>
<input type="checkbox" name="checkbox[]" value="4" checked="true" />
<label>text4</label>
I have multiple radio buttons generated in a php loop which looks something like this
while(){
<input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team1'].' " onclick="return disp()""><span>'.$team1.'</span>
<input type="radio" id="picks'.$x.'" name="picks['.$x.']" value="'.$row['team2'].' "onclick="return disp()""><span>'.$team2.'</span>
<input type="radio" name="picks'.$x.'" value="draw" onclick="return disp()">
}
What I want to do
Display all selected radio buttons in a div on the bottom of page
My Code
var elmnts = document.getElementById("makePicksForm").elements
var lngth = document.getElementById("makePicksForm").length;
var div = document.getElementById("dispPicks");
for (var x = 0; x < lngth; x++) {
if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
div.innerHTML = elmnts[x].value;
}
}
My Problem
Only the value of first selected radio button is displayed in div, other radio buttons are ignored
My Question
Any idea how I can modify my javascript to display the values of ALL selected radio buttons?
Since you've tagged your question with jQuery, here is a jQuery solution. Run the snippet to see it work:
$(document).ready(function () {
$(':radio').change(function (e) {
//clear the div
$('#dispPicks').html('');
//update the div
$(':radio:checked').each(function (ind, ele) {
$('#dispPicks').append($(ele).val() + '<br/>');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="foo" value="foo1" />
<input type="radio" name="foo" value="foo2" />
<input type="radio" name="foo" value="foo3" />
<br/>
<input type="radio" name="bar" value="bar1" />
<input type="radio" name="bar" value="bar2" />
<input type="radio" name="bar" value="bar3" />
<br/>
<input type="radio" name="wow" value="wow1" />
<input type="radio" name="wow" value="wow2" />
<input type="radio" name="wow" value="wow3" />
<div id="dispPicks"></div>
You're using lngth in your for loop, but that's defined by getting an element by ID which should only be 1 element. Your loop will only run once that way...
Assuming the element with ID makePicksForm contains all your radio buttons, you need to get the length of the elements:
var elmnts = document.getElementById("makePicksForm").elements;
var div = document.getElementById("dispPicks");
for (var x = 0; x < elmnts.length; x++) {
if (elmnts[x].type == "radio" && elmnts[x].checked == true) {
div.innerHTML += elmnts[x].value;
}
}
Also, you need to add the value to the innerHTML property, using +=
as a side note: your PHP loop is creating duplicate ID's, which will result in failures in your javascript code if you need to reference the elements...
Another jQuery-Fiddle
<input type="radio" id="bob" name="boys" value="Bob"><label for="bob">Bob</label><br>
<input type="radio" id="jim" name="boys" value="Jim"><label for="jim">Jim</label><br>
<input type="radio" id="pete" name="boys" value="Pete"><label for="pete">Pete</label><br>
<input type="radio" id="mary" name="girls" value="Mary"><label for="mary">Mary</label><br>
<input type="radio" id="jane" name="girls" value="Jane"><label for="jane">Jane</label><br>
<input type="radio" id="susan" name="girls" value="Susan"><label for="susan">Susan</label>
<h3><span id="boy">?</span> and <span id="girl">?</span></h3>
$("input[name=boys]").click(function () {
$("#boy").text($(this).val());
});
$("input[name=girls]").click(function () {
$("#girl").text($(this).val());
});
<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>