We Keep Coding

If two radio button checked, add css to div

There are two radio buttons separately. Have different name values. I'm trying to add a css to the div element when both are "checked".
$(document).ready(function(){
$('input[name="nameone"]').click(function(){
if($(this).is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>

Just add a second if condition like you do for the input[name="nameone"]:
function showDiv() {
if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
$(".calculate-total").css("display", "block")
}
}
$(document).ready(function() {
$('input[name="nameone"], input[name="nametwo"]').click(function() {
showDiv();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>

Just check if both of them are checked:
$(document).ready(function(){
$('input[name="nameone"], input[name="nametwo"]').click(function(){
if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
$(".calculate-total").css("display","block")
}
});
});

You are only checking if the first radio input is clicked (checked), that's why you the div is showing when you click on the first radio input. You should listen/check for both. If both are clicked (checked). Then that's when you want to do something. You can use the && to get the job done
function showDiv() {
if ($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")) {
$(".calculate-total").css("display", "block")
}
}
$(document).ready(function() {
$('input[name="nameone"], input[name="nametwo"]').click(function() {
showDiv();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>

You have to check if all radio buttons are checked and based on this check you can toggle the visibility of the block.
I added a class to the radiobuttons you want to check. And only if the length of all radiobuttons is equal to the checked onces i show the calculate-total div
$(document).ready(function() {
$('input[type="radio"]').on('change', function() {
if ($('.check-it').filter(':checked').length === $('.check-it').length) {
$(".calculate-total").css("display", "block")
} else {
$(".calculate-total").css("display", "none")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" class="check-it" /> Nameone radio
</label>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" class="check-it" /> Namtwo radio
</label>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>

You need to listen for both radio buttons and check for both each time:
$(document).ready(function(){
$('input:radio').change(function(){
if($('input[name="nameone"]').is(":checked") && $('input[name="nametwo"]').is(":checked")){
$(".calculate-total").css("display","block")
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>
<input type="radio" name="nameone" /> Nameone radio
</label>
<br><br>
<label>
<input type="radio" name="nametwo" /> Namtwo radio
</label>
<div class="calculate-total" style="display:none;">If two radio checked both, this div will be visible.</div>

Radio button group appears only when first one gives output

I have three radio buttons groups i want to hide the last two radio button groups which will be displayed once appropriate output from first is given.
The code:
<div class="row">
<div>
<script type="text/javascript">
function displaytxt(e) {
var valueRadio = e;
if (valueRadio == 0)
{
document.getElementById('dynamictxt').style.display = 'none';
}
else
{
document.getElementById('dynamictxt').style.display = '';
}
}
</script>
<div>
<script type="text/javascript">
function displaytxt1(e) {
var valueRadio = e;
if (valueRadio == 2) {
document.getElementById("dynamictxt1").innerHTML = "Check if the termination is for past date or future date";
}
else
{
document.getElementById("dynamictxt1").innerHTML = "Go back to the request manager for confirming the user termination date";
}
}
</script>
Is there a way to do so using java script?
Thanks in advance.

try like this
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}

I wish I could understand your question, but based on the title of your question, perhaps, this could help
<form name="form1" method="post" action="">
<p id="rad1"><input type="radio" name="rdbutton" value="radio" id="rdbutton_0">
Radio 1</p>
<p id="rad2"><input type="radio" name="rdbutton" value="radio" id="rdbutton_1">
Radio 2</p>
<p id="rad3"><input type="radio" name="rdbutton" value="radio" id="rdbutton_2">
Radio 3</p>
</form>
<script>
$('#rad1').on('click',function(){
hideSelects();
});
function hideSelects() {
$('p#rad2').hide();
$('p#rad3').hide();
};
</script>
Demo

Redirect form based on radio selection

So, i have a form with 3 radio buttons. Depending on which option the user selects (he can only choose one), there can be 3 situations:
if he selects the first one, when he submits the form, he gets redirected to a new URL.
if he selects the second one, a div appears (and then disappears).
if he selects the third one, a div appears (different from the previous one), and then it also disappears.
My HTML:
<form>
<div class="radio">
<label><input type="radio" name="paypal" value="paypal"</label>
</div>
<div class="radio">
<label><input type="radio" name="money" value="money"></label>
</div>
<div class="radio">
<label><input type="radio" name="mastercard" value="mastercard"></label>
</div>
</form>
<button type="button" id="button1" name="button">Check</button>
My JQuery:
$('#button1').click(function() {
var value = $(this).val();
if (value == 'paypal') {
window.location.assign("http://www.paypal.com");
}
else if (value == 'money') {
$('.div2').show('slow');
$('.div2').fadeOut(4000);
}
}
else if (value == 'mastercard') {
$('.div1').show('slow');
$('.div1').fadeOut(4000);
}
But something is not working in here, and I can't figure out what or where.
EDIT: No error, the JQuery code just doesn't work. Whatever option I choose, when I submit nothing happens.

By using var value = $(this).val(); inside the button click, you are actually taking the value of the button itself which is not you are intending to do.
Make all radio button name same. Try the following code:
$('#button1').click(function() {
var value = $('input[name=myRadio]:checked').val();
if (value == 'paypal') {
console.log(value);
window.location.assign("http://www.paypal.com");
}
else if (value == 'money') {
console.log(value);
$('.div2').show('slow');
$('.div2').fadeOut(4000);
}
else if (value == 'mastercard') {
console.log(value);
$('.div1').show('slow');
$('.div1').fadeOut(4000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio">
<label><input type="radio" name="myRadio" value="paypal">Pay Pal</label>
</div>
<div class="radio">
<label><input type="radio" name="myRadio" value="money">Money</label>
</div>
<div class="radio">
<label><input type="radio" name="myRadio" value="mastercard">Master Card</label>
</div>
</form>
<button type="button" id="button1" name="button">Check</button>

I would suggest using submit button along with the submit form event like below to make it work exactly as you like, and group the radio buttons by assigning similar names, and try to reduce the if else and make it more readable like the code below
let formEvents = {
paypal: function() {
console.log('redirecting');
//uncomment the following line when you use it in your script
//window.location.assign("http://www.paypal.com");
},
money: function() {
$('.div2').show('slow', function() {
setTimeout("$('.div2').fadeOut(4000)", 500);
});
},
mastercard: function() {
$('.div1').show('slow', function() {
$('.div1').fadeOut(4000);
});
}
}
$('form').on('submit', function(e) {
e.preventDefault();
var value = $(this).find('input:radio:checked').val();
if (formEvents.hasOwnProperty(value)) {
formEvents[value].call(this);
}
});
.div1,
.div2 {
display: none;
background: #c8c8c8;
border: 2px dashed #000;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio">
<label><input type="radio" name="selection" value="paypal">paypal</label>
</div>
<div class="radio">
<label><input type="radio" name="selection" value="money">money</label>
</div>
<div class="radio">
<label><input type="radio" name="selection" value="mastercard">mastercard</label>
</div>
<button type="submit" id="button1" name="button">Check</button>
</form>
<div class="div1">div 1</div>
<div class="div2">div 2</div>

How to grey out other radio buttons after one is selected until refresh

Hopefully somebody can prompt me into the right direction,
I want a simple 3 radio button form, lets say 1,2,3
once 1 has been selected i want to disable options 2 and 3 until page has been refreshed
so maybe those option would grey out and not be selectable
any help appreciated cant find a thing on google

We will group radio buttons in a div:
<div class="readioBtnDiv">
<input type="radio" name="group1" value="1" />1
</div>
<div class="readioBtnDiv">
<input type="radio" name="group2" value="1" />2
</div>
<div class="readioBtnDiv">
<input type="radio" name="group3" value="1" />3
</div>
Now we will disable another radio button when one is selected:
$("input:radio").click(function() {
var $this = $(this);
var value = $this.val();
$this.closest('.readioBtnDiv')
.siblings('.readioBtnDiv')
.find('input:radio[value="' + value + '"]')
.attr("disabled","disabled");
});

Here we go, jQuery way:
HTML:
<form>
<input type="radio" value="1"> 1
<input type="radio" value="2"> 2
<input type="radio" value="3"> 3
</form>
JS:
<script>
$('input').on('click', function() {
$(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
})
</script>
To add jQuery to your project - simply insert
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
inside your <head> </head> tag.
UPDATE:
To keep it after page refreshes you should modify your code to this:
<form>
<input type="radio" value="1" id="radio1"> 1
<input type="radio" value="2" id="radio2"> 2
<input type="radio" value="3" id="radio3"> 3
</form>
<script>
$('#'+localStorage.selected).trigger('click');
$('#'+localStorage.selected).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
$('input').on('click', function() {
$(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
localStorage.setItem('selected', $(this).attr('id'));
})
</script>

I think all the answers are right and accurate to your question above but according to me you would find this answer more useful and understandable if you are newbie
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myFunction1() {
document.getElementById("radio2").disabled = true;
document.getElementById("radio3").disabled = true;
}
function myFunction2() {
document.getElementById("radio1").disabled = true;
document.getElementById("radio3").disabled = true;
}
function myFunction3() {
document.getElementById("radio2").disabled = true;
document.getElementById("radio1").disabled = true;
}
</script>
</head>
<body>
<div class="block">
<input onclick="myFunction1();" type="radio" id="radio1" value="Radio1" /><label>Radio1</label>
<input onclick="myFunction2();" type="radio" id="radio2" value="Radio2" /><label>Radio2</label>
<input onclick="myFunction3();" type="radio" id="radio3" value="radio3" /><label>radio3</label>
</div>
</body>
</html>
It's a working example according to your need. Cheers :)

how to uncheck a radio button

I want to uncheck a radiobutton i found a way for doing this but while the radio buttons are inside a form the code won't work this is my script for unchecking a checked radio button
<script type="text/javascript">
var allRadios = document.getElementsByName(1);
var booRadio;
var x = 0;
for(x = 0; x < allRadios.length; x++){
allRadios[x].onclick = function() {
if(booRadio == this){
this.checked = false;
booRadio = null;
}else{
booRadio = this;
}
}
}
</script>
<form name="theForm" target="_blank" action="laravel.php">
<label for="test">test</label>
<input type="radio" id="1" class="radio" name="1" value="1">
<input type="radio" id="2" class="radio" name="1" value="2">
<input type="radio" id="3" class="radio" name="1" value="3">
<input type="radio" id="4" class="radio" name="1" value="4">
</form>
the script works fine when the radio buttons are outside the form tag but it is not working when radio inputs are in the form i am wondering what am i missing here

The problem is the order. You load your javascript before the html is finished.
To solve this, simply place the javascript near the end of the file, just before the closing </body> tag.
If you use jquery, you can also wrap it with $(document).ready(function() { ... }.