How can I check if all radio buttons are checked - javascript

I have a number of radio buttons with the option, 'yes' or 'no'.
Is there a simple way with jQuery to check if they all have 'yes' selected?
HTML is:
<input type="radio" id="yes1" name="group1" value="yes">Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes<br>
<input type="radio" name="group3" value="No">No<br>
I'm guessing it's something along the lines of
yes1 = $("#yes1").prop("checked", true);
yes2 = $("#yes2").prop("checked", true);
yes3 = $("#yes2").prop("checked", true);
if (yes1 & yes2 & yes3) {
// do something ?
}

You can rather compare the length of elements with ['value=yes] with elements with ['value=yes] and property :checked:
if($('[value=yes]').length==$('[value=yes]:checked').length){
//all yes elements are checked
}

One way is to check whether all the radios with value as yes is checked
if($('input[type="radio"][value="yes"]').not(':checked').length == 0){
//all checked
}

You may check the count of radio buttons with value != true. If the count is Zero, all radio buttons would be selected.
if(!$('input[type="radio"][value="yes"]').not(':checked').length){
//select all radio buttons with value = yes
}

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>

<input type="radio" id="yes1" name="group1" value="yes" checked>Yes<br>
<input type="radio" name="group1" value="No">No<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes" checked>Yes<br>
<input type="radio" name="group2" value="No">No<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes" checked>Yes<br>
<input type="radio" name="group3" value="No">No<br>
var yes1 = $("#yes1").is(":checked")
var yes2 = $("#yes2").is(":checked")
var yes3 = $("#yes3").is(":checked")
//$("#Myradio").is(":checked")
if (yes1 & yes2 & yes3) {
alert('sasa');
//do something
}
FIDDLE

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="radio" id="yes1" name="group1" value="yes">Yes
<br>
<input type="radio" name="group1" value="No">No
<br>
<hr>
<input type="radio" id="yes2" name="group2" value="yes">Yes
<br>
<input type="radio" name="group2" value="No">No
<br>
<hr>
<input type="radio" id="yes3" name="group3" value="yes">Yes
<br>
<input type="radio" name="group3" value="No">No
<br>
<input type="button" id="btn" value="Test" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var length = 3;
var isChecked = true;
for (var i = 1; i <= length; i++) {
isChecked = isChecked && ($("#yes" + i).is(":checked"));
}
if (isChecked)
alert("All are checked");
else
alert("All are not checked");
});
});
</script>
</body>
</html>

Related

Multiple radio buttons controlgroups in jQuery mobile

I have the below html code
<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>
I want if choice2 is checked and one of cb-choice1 or cb-choice2 then the received value is the value of cb-... choice (4 or 5) if choice2 is checked and no cb-... is checked then the received value is 2.
How can I do this?
I try this
$("input:checked").each(function(i) {
if (($(this).attr("radioatrr") == 0)) {
alert(($(this).attr("value"));
}
})
but can not working as I want
You can check out this tutorial from W3 to help you out:
https://www.w3schools.com/jsref/prop_radio_value.asp
In regards to your problem, you can hook in this function:
function handleRadioSelection() {
if(document.getElementByName('choice2').checked) {
if (document.getElementByName('cb-choice1').checked) {
return document.getElementByName('cb-choice1').value
} else if (document.getElementByName('cb-choice2').checked) {
return document.getElementByName('cb-choice2').value
} else {
return document.getElementByName('choice2').value
}
}
}
I'm using a hidden input field to capture the value that you want, you can change it to anything else. I've also modified the radio buttons into two groups, as from reading the question/requirements I think that's how it should be setup.
$("#submit").click(function() {
//capture group 1 and group 2 value that's checked
var val1 = $('input[name=choice]:checked').val();
var val2 = $('input[name=choice2]:checked').val();
//capture the input object with the desired value
var sendVal = $('input[name=myval]');
//reset value to 0 as this happens on click, incase value gets changed
sendVal.val(0);
//if group 1 is 2 and there is a value selected in group2
if(val1==2&&val2 != undefined){
sendVal.val(val2);
//if group 1 is 2 and group 2 is not selected
}else if(val1==2&&val2 == undefined){
sendVal.val(val1);
}
//showing value to be sent in an alert
alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>
<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>
<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>

Simple quiz not working in jQuery or JavaScript

I am making a simple quiz to get the number of correct questions answered by a person when he submits the 'submit' button. But, it is always giving Zero. Pls help.
$(document).ready(function(){
$('button').click(function(){
var count = 0;
if($('[name=q1]').val() == "Delhi"){count++;}
if($('[name=q2]').val() == "Lotus"){count++;}
alert(count);
});
});
<body>
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
It is always giving '0', but if I select 'Delhi' and 'Lotus' it should give answer as 2.
Two things:
$('[name=q1]').val() will give you the value of the first element with name="q1", not the checked element. For that, add :checked.
You're comparing "delhi" with "Delhi"; case matters.
$(document).ready(function() {
$('button').click(function() {
var count = 0;
if ($('[name=q1]:checked').val() == "delhi") {
count++;
}
if ($('[name=q2]:checked').val() == "lotus") {
count++;
}
alert(count);
});
});
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You have an error in your Js code, and you have to select the checked inputs, your code selects just the first input
$(document).ready(function(){
$('button').click(function(){
var count = 0;
if($('input[name=q1]:checked').val() == "delhi"){count++;}
if($('input[name=q2]:checked').val() == "lotus"){count++;}
alert(count);
});
});
<body>
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
</body>
$(document).ready(function(){
$('button').click(function(){
var count = 0;
if($('[name=q1]:checked').val() == "delhi"){count++;}
if($('[name=q2]:checked').val() == "lotus"){count++;}
alert(count);
});
});
<body>
<div>
<p>Question: What is capital of India?</p>
<input type="radio" name="q1" value="delhi"> Delhi
<input type="radio" name="q1" value="mumbai"> Mumbai
<input type="radio" name="q1" value="kolkata"> Kolkata
<input type="radio" name="q1" value="lucknow"> Lucknow
</div>
<div>
<p>Question: What is the national flower of India?</p>
<input type="radio" name="q2" value="rose"> Rose
<input type="radio" name="q2" value="lotus"> Lotus
<input type="radio" name="q2" value="sunflower"> Sunflower
<input type="radio" name="q2" value="tulip"> Tulip
</div>
<button>submit</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</body>
Try to rename you values with a capital letter (lotus=>Lotus, etc).

Javascript live calculation from radio buttons

There are some radio buttons
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4
I want to print the "data-price" of selected radio button with live changing. How can I make this?
I don't know what exactly you are asking.. but if you just want to print the data-price, you can do it this way.
$(function(){
$('input[type=radio]').on('click',function(){
data= $(this).data('price');
$('#result').text(data);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="highlight" data-price="25.1" value="a1">a1
<input type="radio" name="highlight" data-price="55.4" value="a2">a2
<input type="radio" name="highlight" data-price="65.3" value="a3">a3
<input type="radio" name="highlight" data-price="95.9" value="a4">a4
<div id='result'>
</div>
HTML
<input class='radio' type="radio" name="highlight" data-price="25.1" value="a1">a1
<input class='radio' type="radio" name="highlight" data-price="55.4" value="a2">a2
<input class='radio' type="radio" name="highlight" data-price="65.3" value="a3">a3
<input class='radio' type="radio" name="highlight" data-price="95.9" value="a4">a4
<input id="price" type="text">
Javascript (onclick)
var inputs = document.getElementsByClassName('radio');
var textbox = document.getElementById('price');
var i;
for (i = 0; i < inputs.length; i++) {
inputs[i].onclick = function(){
textbox.value = this.dataset.price;
}
}
Javascript (eventListener)
for (i = 0; i < inputs.length; i++) {
function myFn(){
textbox.value = this.dataset.price;
}
inputs[i].addEventListener("change",myFn);
}
https://jsfiddle.net/2zfjfkhL/

get selected value of radio button

I am new to Javascript. I have a code snippet like this:
<ul class="dropdown-menu dropdown-menu-right" onchange="onCompChange()">
<div class="radio" id = "compSelect">
<label><input type="radio" name="optradio">op1</label>
</br>
<label><input type="radio" name="optradio">op2</label>
</br>
<label><input type="radio" name="optradio">op3</label>
</div>
</ul>
On selecting a radio button, I want to know which option is selected (op1/op2/op3).
How about this:
<input type="radio" name="opt radio" onclick="check(this.value)" value="op1" >op1</label>
<input type="radio" name="opt radio" onclick="check(this.value)" value="op2" >op2</label>
<input type="radio" name="opt radio" onclick="check(this.value)" value="op3" >op3</label>
in your .js:
function check(value) {
//... use your value
}
<ul class="dropdown-menu dropdown-menu-right" >
<div class="radio" id = "compSelect">
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op1</label>
</br>
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op2</label>
</br>
<label><input onchange="onCompChange(this)" type="radio" name="optradio">op3</label>
</div>
</ul>
<script type = "text/javascript" language = "javascript">
function onCompChange(radio){
var content = radio.parentElement.innerHTML;
var output = content.replace(/<\/?[^>]+(>|$)/g, "");
alert(output);
}
</script>
To get the value of the selected radioName item of a form with id myForm:
$('input[name=radioName]:checked', '#myForm').val()
Here's an example:
$('#myForm input').on('change', function() {
var value = $('input[name=radioName]:checked', '#myForm').val();
console.log(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
Think this helps you.

check all radio groups are checked

I want to know best way to check all the radio button groups are checked in a page.
My code -
<div class="radioGroup">
Question1
<input type="radio" value="1" name="group1"/>1
<input type="radio" value="2" name="group1"/>2
<input type="radio" value="3" name="group1"/>3
<input type="radio" value="4" name="group1"/>4
</div>
<div class="radioGroup">
Question2
<input type="radio" value="1" name="group2"/>1
<input type="radio" value="2" name="group2"/>2
<input type="radio" value="3" name="group2"/>3
<input type="radio" value="4" name="group2"/>4
</div>
<div class="radioGroup">
Question3
<input type="radio" value="1" name="group3"/>1
<input type="radio" value="2" name="group3"/>2
<input type="radio" value="3" name="group3"/>3
<input type="radio" value="4" name="group3"/>4
</div>
<input type="button" value="check all radio Group selected" onclick="validate();"/>
and I wrote a javascript function which works fine but I want a good solution means single selector solution.
function validate(){
var isNotSelected = false;
$(".radioGroup").each(function(i,v){
var grpName = $(this).find("input:first").attr("name");
if($(this).find("[name='"+grpName+"']:checked").val() == undefined){
isNotSelected =true;
}
});
if(isNotSelected){
alert("not all checked");
}
else{
alert("all checked");
}
}
Thanks in advance
You can do
var allChecked = !$('.radioGroup:not(:has(:checked))').length;
demonstration
Check if the number of total groups match the number of groups that contain a checked radio button, if so, all groups have been selected
$('.radioGroup').length === $('.radioGroup:has(input:checked)').length

Categories