We Keep Coding

form still returns false even when one of radios is being checked

Why is it that when one of gender radios is being checked the form still returns false?
HTML
<form action="">
<input class="radio_male" type="radio" name="gender" value="Male"> Male
<br>
<input class="radio_female" type="radio" name="gender" value="Female"> Female
<br>
<input type="submit" value="Submit">
</form>
JavaScript
var $ = document.querySelector.bind(document);
$('form').onsubmit = function() {
if(!$('.radio_male').checked || !$('.radio_female').checked) {
return false;
} else {
return true;
}
}

You want to check that is any one of option is selected so do following,
var $ = document.querySelector.bind(document);
$('form').onsubmit = function() {
if($('.radio_male').checked || $('.radio_female').checked) {
return true;
} else {
return false;
}
}
Link to jsFiddle
Explanation
According to your following condition,
if(!$('.radio_male').checked || !$('.radio_female').checked) {
You are checking that if Female is not selected or male is not selected then false which is logically wrong as always there will be either female not selected(when male is selected) or male not selected(when female is selected) or both not-selected(default state), so that condition will always yield true.
So in my suggested answer, we are checking first that either male is selected or female is selected then true, else false.

You might want to read your code out aloud to yourself. You are asking if male isn't checked OR female isn't checked
Since the radio buttons only ever let one option be selected, this condition will always run.
Your simplest solution is to change from OR to AND
if(!$('.radio_male').checked && !$('.radio_female').checked)
JSFiddle: https://jsfiddle.net/Lz44tk7d/2/

To check if radio or checkbox is checked using jQuery, it's:
$('.radio_male').is(':checked')

You could just reverse your codes where you checked if one of them is checked then return true and else return false or you could try to use && rather than or to checked if the radio button are checked.

detect selections of 2 sets of radio buttons in jquery

I have a web page which asks the user two simple yes-no questions. Under each question there's a set of two radio buttons in which the user can choose either yes or no.
<p>Question 1 yes or no?</p>
<input type="radio" name="q1" id="q1-y" value="Yes">Yes
<input type="radio" name="q1" id="q1-n" value="No">No
<p>Question 2 yes or no?</p>
<input type="radio" name="q2" id="q2-y" value="Yes">Yes
<input type="radio" name="q2" id="q2-n" value="No">No
If the user chooses yes for BOTH questions, it needs to display some HTML which will provide a link to a certain page. If the users answers no to one or both of the questions, then some alternative HTML will appear which will display another message.
There can't be a submit button like a form and this has to be a javascript/jquery based solution, not server side. The page needs to:
1) Detect when both sets of questions have been answered. Then
2) Instantly display certain HTML depending on if either a) YES has been answered to both, or b) if a NO has been given once or more.
Essentially, the logic should be something along the lines of:
if( /*both radio buttons answered*/ ){
if( /*both answers are yes*/ ){
/*show HTML set 1*/
} else {
/*show HTML set 2*/
}
}
I have tried looking at questions on this site, but I can't seem to find a solution to this specific problem. Let me know if anything needs clarifying.
Thanks very much!

Different solution:
$( "input" ).change(function() {
var buttons = jQuery("input:radio:checked").get();
var values = $.map(buttons, function(element) {
return $(element).attr("value");
});
if(values == "Yes,Yes") {
alert("both yes");
}
else {
//do something else
}
});
Demo: Multiple Radiobuttons
Don't like to check the string like that but could be adjusted in a proper way.

Try this:
$(document).ready(function(){
$("#yep").hide();
$("#nope").hide();
$(".nones").click(function(){
$("#yep").hide();
$("#nope").show();
});
$(".yipis").click(function(){
var checkeo = 1;
$( ".yipis" ).each(function( index ) {
if($(this).is(":checked") == false)
{
checkeo = 0;
};
});
if(checkeo){
$("#nope").hide();
$("#yep").show();
}
});
});
Working fiddle: http://jsfiddle.net/robertrozas/84o46mqd/

Here is a possible way to access the values you want. JSFiddle
HTML
<p>Question 1 yes or no?</p>
<input type="radio" name="q1" id="q1-y" value="Yes">Yes
<input type="radio" name="q1" id="q1-n" value="No">No
<p>Question 2 yes or no?</p>
<input type="radio" name="q2" id="q2-y" value="Yes">Yes
<input type="radio" name="q2" id="q2-n" value="No">No
<p>
<input type="button" id="finished" value="Submit" />
</p>
<div id="htmlarea"></div>
JavaScript
I find that jQuery is() function and the pseudo class :checked are helped when reading radio buttons.
$("#finished").click(function() {
var q1y = $("#q1-y").is(":checked");
var q1n = $("#q1-n").is(":checked");
var q2y = $("#q2-y").is(":checked");
var q2n = $("#q2-n").is(":checked");
if (q1y && q2y) {
$("#htmlarea").html("Both yes");
} else if (q1n && q2n) {
$("#htmlarea").html("Both no");
} else {
var html = "";
if (q1y) html += "Q1 yes. ";
if (q1n) html += "Q1 no. ";
if (q2y) html += "Q2 yes. ";
if (q2n) html += "Q2 no. ";
if (html=="") html = "None selected";
$("#htmlarea").html(html);
}
});
Instead of setting the HTML text, use window.location.href = "http://someurl.com"; if you want to redirect to another webpage.

One approach, given the following HTML (note the custom data-* attributes in the appended <div> elements, used to identify which choice those elements relate to):
<p>Question 1 yes or no?</p>
<input type="radio" name="q1" id="q1-y" value="Yes" />Yes
<input type="radio" name="q1" id="q1-n" value="No" />No
<p>Question 2 yes or no?</p>
<input type="radio" name="q2" id="q2-y" value="Yes" />Yes
<input type="radio" name="q2" id="q2-n" value="No" />No
<div class="result" data-relatesTo="Yes">All choices are 'yes'</div>
<div class="result" data-relatesTo="No">All choices are 'no'</div>
Which works with the following jQuery:
// caching the radio elements on the page:
var radios = $('input[type="radio"]'),
// getting the number of unique radio 'groups':
radioGroups = $.unique($('input[type="radio"]').map(function () {
return this.name;
}).get());
// binding an anonymous function as a change-event handler:
radios.change(function () {
// getting all the checked radio inputs:
var checked = radios.filter(':checked'),
// creating an object that maps to the relevant values/choices to be made:
choice = {
'yes': checked.filter(function () {
return this.value.toLowerCase() === 'yes';
}).get(),
'no': checked.filter(function () {
return this.value.toLowerCase() === 'no';
}).get()
};
// if all groups have a checked radio input:
if (checked.length === radioGroups.length) {
// iterate over the '.result' div elements:
$('div.result').each(function (i, el) {
// using 'toggle(switch)' to show/hide the element,
// the switch tests whether the choice related to the current
// element is equal to the number of radioGroups. If it is,
// it's shown, otherwise it's hidden.
$(this).toggle(choice[el.getAttribute('data-relatesTo').toLowerCase()].length === radioGroups.length);
});
}
});
JS Fiddle demo.
Alternatively, with the same HTML, the following jQuery approach also works:
var radios = $('input[type="radio"]'),
radioGroups = $.unique($('input[type="radio"]').map(function () {
return this.name;
}).get());
radios.change(function () {
var checked = radios.filter(':checked'),
// getting all the unique chosen values (in lowercase):
opts = $.unique(checked.map(function(){
return this.value.toLowerCase();
}).get());
if (checked.length === radioGroups.length) {
// hide all the '.result' elements:
$('div.result').hide()
// filter the 'div.result' elements:
.filter(function(){
// if the number of opts (chosen values) is 1
// (all choices are the same) and the 'data-relatesTo' attribute
// of the current element we're filtering is equal to that single
// option, then the element is retained in the selector
return opts.length === 1 && this.getAttribute('data-relatesTo').toLowerCase() === opts[0].toLowerCase();
})
// and so we show it:
.show();
}
});
JS Fiddle demo.
References:
JavaScript:
Element.getAttribute().
String.prototype.toLowerCase().
jQuery:
$.unique().
each().
filter().
get().
hide().
map().
show().
toggle().

How can I toggle radiobutton

Say this is my HTML:
<input type="radio" name="rad" id="Radio0" checked="checked" />
<input type="radio" name="rad" id="Radio1" />
<input type="radio" name="rad" id="Radio2" />
<input type="radio" name="rad" id="Radio4" />
<input type="radio" name="rad" id="Radio3" />
As you can see the 1st radio button is checked. I need the radio button to function like toggle. For eg. If I again click on radio0, all radio buttons should be unchecked.
How can I achieve that?
Update: I don't want any extra buttons. For eg. I could add a button and set the checked property for all radio buttons to be false. However, I don't want that. I only want my form to consist of these 4 radio buttons.
Update: Since most of the people don't understand what I want, let me try to rephrase- I want the radio button to function in toggle mode. I've given the same name to all radio buttons hence it's a group. Now I want the radiobuttons to toggle itself. Eg. if I click on radio0, it should get unchecked if it's checked and checked if it's unchecked.

The problem you'll find is that as soon a radio button is clicked its state is changed before you can check it. What I suggest is to add a custom attribute to keep track of each radio's previous state like so:
$(function(){
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
});
});
You will also need to add this attribute to the initially checked radio markup
<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />
See demo here : http://jsfiddle.net/GoranMottram/VGPhD/2/

Once you give the name of 2 or more radio buttons as the same, they automatically become a group. In that group only one radio button can be checked. You have already achieved this.

This code solved my issue
$("[type='radio']").on('click', function (e) {
var previousValue = $(this).attr('previousValue');
if (previousValue == 'true') {
this.checked = false;
$(this).attr('previousValue', this.checked);
}
else {
this.checked = true;
$(this).attr('previousValue', this.checked);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label >Toogle radio button example</label>
<br />
<input type="radio" name="toogle_me" value="mango"> Blue </input>
<input type="radio" name="toogle_me" value="kiwi"> Green </input>
<input type="radio" name="toogle_me" value="banana"> Yellow </input>
<input type="radio" name="toogle_me" value="orange"> Orange </input>

I use an onClick() like the following for my custom radios:
$(function(){
// if selected already, deselect
if ($(this).hasClass('selected') {
$(this).prop('checked', false);
$(this).removeClass('selected');
}
// else select
else {
$(this).prop('checked', true);
$(this).addClass('selected');
}
// deselect sibling inputs
$(this).siblings('input').prop('checked', false);
$(this).siblings('input').removeClass('selected');
}

Using #Goran Mottram answer just tweaking it a bit to suit the case where radio buttons are not siblings.
$(".accordian-radio-button").click(function(){
var wasChecked = true;
if($(this).data('waschecked') == true){
$(this).prop('checked', false);
wasChecked = false;
}
$('input[name="ac"]').data('waschecked', false);
$(this).data('waschecked', wasChecked);
})
<input class="accordian-radio-button" data-waschecked="false" type="radio" name="ac" id="a1" />

I ran into this as well, after thinking about it and playing around with the various fiddles offered, I had a few dissatisfactions with the offered solutions.
My main problem was the last line of the accepted answer, requiring a reset:
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
And since I'm not using jQuery, I'd have to loop over and evaluate the siblings myself, which isn't a huge deal, but seemed inelegant to me. But, there's no way around it with that method, because you're using the dataset as a storage of information.
After playing around, I realized is that the problem is that when a radio is clicked, it triggers the clicked event, and whatever function is attached to that click event completes itself before the function for the "onchange" event is ever evaluated, let alone called. So, if the click event "unchecks" the toggle, then no change event is ever fired.
I've left my failed attempt here:
https://codepen.io/RiverRockMedical/pen/daMGVJ
But, if you could answer the question "will a change event happen after this click event?" then you could get a toggle working.
The solution I came up with can be seen at this pen:
https://codepen.io/RiverRockMedical/pen/VgvdrY
But basically is as follows:
function onClick(e) {
e.dataset.toDo = 'uncheck';
setTimeout(uncheck, 1, {
event:'click',
id:e.id,
dataset:e.dataset
});
}
So, on the click event, set a marker that the click has happened, and the use setTimeout() to create a pause that allows the onchange event to be evaluated and fire.
function onChange(e) {
e.dataset.toDo = 'leave';
}
If the onchange event fires, it undoes what was done by the onclick event.
function uncheck(radio) {
log('|');
if (radio.event !== 'click') return;
log('uncheck');
if (radio.dataset.toDo === 'uncheck') {
document.getElementById(radio.id).checked = false;
radio.checked = false;
}
}
Then, when the uncheck function starts, it has the information of whether a change event followed the click event or not. If not, then the radio is unchecked, and functions as a toggle.
And, it's basically self-resetting, so I don't have to loop over all the radios and reset their datasets to the initial values at the end of the function.
Now, I'm sure there's a cooler async/await way to do this that doesn't use setTimeout and would be even more elegant, but I'm still learning and I couldn't come up with it. Anyone else?

<input type="radio" name="gender" id="male"onclick="getChecked(1)"><label for="male">Male</label>
<input type="radio" name="gender" id="female"onclick="getChecked(2)"><label for="female">female</label>
<script>
var btnChecked = "";
function getChecked(i) {
if(btnChecked == i) {
btnChecked = "";
document.getElementsByTagName("input")[i-1].checked = false;
}
else btnChecked = i;
}
</script>

A simple approach in jQuery (even though I don't use jQuery nowdays):
function makeRadioInputsToggleable(radioInputs){
let radioGroup = {
lastValue: radioInputs.filter(':checked').prop('value'),
get value(){
return this.lastValue;
},
set value(v){
let inputToCheck = radioInputs.filter((i, el) => el.value === v);
radioInputs.filter(':checked').prop('checked', false);
if(inputToCheck.length > 0){
inputToCheck.prop('checked', true);
this.lastValue = v;
}else{
this.lastValue = undefined;
}
},
};
radioInputs.on('click', (e) => {
let input = e.target;
if(input.value === radioGroup.lastValue){
input.checked = false;
radioGroup.lastValue = undefined;
}else{
radioGroup.lastValue = input.value;
}
}).on('keydown', (e) => {
if(e.code === 'Space'){
let input = e.target;
if(input.checked){
input.checked = false;
input.blur();
radioGroup.lastValue = undefined;
}
}
});
return radioGroup;
}
let radioInputs = $('input[type="radio"][name="rad"]');
let radioGroup = makeRadioInputsToggleable(radioInputs);
$('.check-radio').on('click', (e)=>{
let value = e.target.value;
radioGroup.value = value;
});
// Note:
// 1. pass a single group of radio inputs to `makeRadioInputsToggleable`
// 2. set distinct values for each radio input in a group.
// 3. to change checked radio programmatically, use `radioGroup.value = 'XXX'` rather than radioInputs.prop('checked', false).filter('[value="XXX"]').prop('checked', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>makeRadioInputsToggleable</h3>
<label><input type="radio" name="rad" value="1" id="Radio0" checked="checked" />1</label>
<label><input type="radio" name="rad" value="2" id="Radio1" />2</label>
<label><input type="radio" name="rad" value="3" id="Radio2" />3</label>
<label><input type="radio" name="rad" value="4" id="Radio4" />4</label>
<label><input type="radio" name="rad" value="5" id="Radio3" />5</label>
<p>1. click on an already-checked radio button, the radio will be toggled to unchecked.</p>
<p>2. focus on an already-checked radio button and press 'Space', the radio will be toggled to unchecked. <i>(This may not work in Code Snippet result area)</i></p>
<p>
3. programmatically
<button class="check-radio" value="2">check radio with value 2</button>
<button class="check-radio" value="10">check radio with value 10</button>
</p>

How to check radio button is checked using JQuery?

I have two radio buttons in one group, I want to check the radio button is checked or not using JQuery, How ?

Given a group of radio buttons:
<input type="radio" id="radio1" name="radioGroup" value="1">
<input type="radio" id="radio2" name="radioGroup" value="2">
You can test whether a specific one is checked using jQuery as follows:
if ($("#radio1").prop("checked")) {
// do something
}
// OR
if ($("#radio1").is(":checked")) {
// do something
}
// OR if you don't have ids set you can go by group name and value
// (basically you need a selector that lets you specify the particular input)
if ($("input[name='radioGroup'][value='1']").prop("checked"))
You can get the value of the currently checked one in the group as follows:
$("input[name='radioGroup']:checked").val()

//the following code checks if your radio button having name like 'yourRadioName'
//is checked or not
$(document).ready(function() {
if($("input:radio[name='yourRadioName']").is(":checked")) {
//its checked
}
});

This is best practice
$("input[name='radioGroup']:checked").val()

jQuery 3.3.1
if (typeof $("input[name='yourRadioName']:checked").val() === "undefined") {
alert('is not selected');
}else{
alert('is selected');
}

Radio buttons are,
<input type="radio" id="radio_1" class="radioButtons" name="radioButton" value="1">
<input type="radio" id="radio_2" class="radioButtons" name="radioButton" value="2">
to check on click,
$('.radioButtons').click(function(){
if($("#radio_1")[0].checked){
//logic here
}
});

Check this one out, too:
$(document).ready(function() {
if($("input:radio[name='yourRadioGroupName'][value='yourvalue']").is(":checked")) {
//its checked
}
});

Taking some answers one step further - if you do the following you can check if any element within the radio group has been checked:
if ($('input[name="yourRadioNames"]:checked').val()){ (checked) or if (!$('input[name="yourRadioNames"]:checked').val()){ (not checked)

Try this:
var count =0;
$('input[name="radioGroup"]').each(function(){
if (this.checked)
{
count++;
}
});
If any of radio button checked than you will get 1

Simply you can check the property.
if( $("input[name='radioButtonName']").prop('checked') ){
//implement your logic
}else{
//do something else as radio not checked
}

JavaScript function checked if a radio button is selected

<label for="Merital Status">Marital Status:</label>
<input type="radio" title="Marital Status" name="Marital_Status" id="Marital Status" value="Single"/>Single
<input type="radio" title="Marital Status" name="Marital_Status" value="Married"/>Married
<input type="radio" title="Marital Status" name="Marital_Status" value="Divorced"/>Divorced
And I want to write a JavaScript function that checks whether a radi button named "Merital_Status" is selected. I represent the function that I wrote for this purpose. The function gets as an argument the element id and returnes boolen:
function radio_button_checker(elemId)
{
var radios = document.getElementsByTagName(elemId);
var value = false;
for (var i = 0; i < radios.length; i++)
{
if (radios[i].checked)
{
value = true;
break;
}
}
return value;
}
And I invoke this function like this:
if (radio_button_checker('Marital_Status') == false)
{
alert('Please fill in your Merital Status!');
return false;
}
But it does not work. Please tell me how to modify my function in order to check if radiobutton is checked.

What you are doing is looking for an element with the tag name "Merital_Status". Replace document.getElementsByTagName with document.getElementsByName and it should work.

You are mixing ID's and NAME's.
Your radio button "set" needs to all have the same name (which you have), and if you need to refer to them individually by id, then you'll need to add an id to the last two (currently not set... and not required if you apply the labels to each individual option). You will want the label tags for each radio button as it improves the usability by allowing the user to click on the word not just the small radio button.
Marital Status:
<label><input type="radio" name="Marital_Status" value="Single"/>Single</label>
<label><input type="radio" name="Marital_Status" value="Married"/>Married</label>
<label><input type="radio" name="Marital_Status" value="Divorced"/>Divorced</label>
However when you test... you want to see that at least 1 radio in the set is checked. You can do this with:
function radioButtonChecker(fieldNAME){
var radioSet = document.forms[0].elements[fieldName];
for(var i=0;i<radioSet.length;i++){
if(radioSet[i].checked){
return true;
}
}
return false;
}
There are a few presumptions made here.
You always have more than 1 radio button in the set
Your form is the 1st (index 0) form... if not you'll need to adjust the radioSet lookup