We Keep Coding

jQuery keeps getting value of wrong radio button if checked by default

Radio buttons, the first one is checked by default:
<div class="shipping">
<div class="title">Select shipping method</div>
<label><input type="radio" name="shipping" value="courier-dpd" checked="checked">Courier DPD</label>
<label><input type="radio" name="shipping" value="personal">Personal pick up</label>
<button>Next</button>
</div>
Js:
$(document).on('click', '.shipping button', function() {
let val = $('.shipping').find('input[name="shipping"]:checked').val()
console.log(val);
}
Even if I manually switch the radio buttons and select the second one, jQuery keeps getting the value of the first radio button, independently on user selection.
Why is that? I can't find solution.

Edit 2: Added JS code from updated question. It seems to work here.
Edit: Added submit button to demonstrate submit action.
Well, are you calling console.log after changing the value? I created a snippet below and it works fine.
$(function() {
let val = $('.shipping').find('input[name="shipping"]:checked').val()
console.log(val);
/*$('#btn').on('click', function() {
let val = $('.shipping').find('input[name="shipping"]:checked').val()
console.log(val);
})*/
$(document).on('click', '.shipping button', function() {
let val = $('.shipping').find('input[name="shipping"]:checked').val()
console.log(val);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shipping">
<div class="title">Select shipping method</div>
<label><input type="radio" name="shipping" value="courier-dpd" checked="checked">Courier DPD</label>
<label><input type="radio" name="shipping" value="personal">Personal pick up</label>
<button>Next</button>
</div>

Add required to input of hidden div when radio is checked

What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,

try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>

Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.

Radio button is not changing the value once I am clicking first time

I have 3 radio buttons and it's by default is selected as YES and I have one submit button. If I will select any one as no button then submit button will disable. Once every three button is yes then save button enable otherwise disable.
I have below code written in my project.
app
.controller(
"MainCtrl",
function($scope, $http) {
$scope.formModel = {
internationalClient: 0,
isConfidential: 0,
isModificationLossRecog: 0,
idenComplianceForFinDifficulty: 1,
idenComplianceForConcession: 1,
idenComplianceForModificationOrRefin: 1
};
$(".radioBtn")
.click(
function() {
$("#save").attr("disabled", true);
$scope.forbraranceJson1 = angular.toJson(
$scope.formModel, false);
console.log($scope.forbraranceJson1);
var x1 = JSON.parse($scope.forbraranceJson1);
console.log("11 " + x1.idenComplianceForModificationOrRefin);
console.log("22 " + x1.idenComplianceForFinDifficulty);
console.log("33 " + x1.idenComplianceForFinDifficulty);
if (x1.idenComplianceForModificationOrRefin == 1 && x1.idenComplianceForConcession == 1 && x1.idenComplianceForFinDifficulty == 1) {
$("#save").attr("disabled", false);
$scope.measureCheckbomsg = "";
} else {
//$("#save").attr("disabled", true);
$scope.measureCheckbomsg = "Please select all Forbearance requirements as YES";
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<html ng-app="App">
<body ng-controller="MainCtrl">
<form name="theForm" novalidate="novalidate">
<input type="radio" ng-model="formModel.isModificationLossRecog" ng-value="1">Yes
<input type="radio" ng-model="formModel.isModificationLossRecog" ng-value="0" ng-checked="true">No
<input type="radio" class="radioBtn" ng-model="formModel.idenComplianceForFinDifficulty" ng-value="1" ng-checked="true">Yes
<input type="radio" ng-model="formModel.idenComplianceForFinDifficulty" class="radioBtn" ng-value="0">No
<input type="radio" ng-model="formModel.idenComplianceForConcession" ng-value="1" class="radioBtn" ng-checked="true">Yes
<input type="radio" class="radioBtn" ng-model="formModel.idenComplianceForConcession" ng-value="0">No
<button class="btn btn-success btn-sm" id="save" ng-click="saveRegistration(theForm.$valid)">Save</button>
</body>
</html>
When I click first time any radio button the value does not change 1 to 0 . If I will click a 2nd time then its value is changing in JSON.

In your sample, you should not use radio buttons but checkbox. Radio button is more use when you want a choice between several value. In you case it's more like a boolean so checkbox seems a better choice.
Then in angular use "ng event" like ng-click or ng-change
<input type="checkbox" ng-model="formModel.idenComplianceForConcession" ng-click="clickedCallback"/>
like that in your controller
$scope.clickedCallback = function () {
console.log(formModel.idenComplianceForConcession);
}

jQuery checking radio box status and showing an element

I'm trying to show a div of another set of radio boxes but only depending on which radio button is first selected.
If option option one is selected, I would like condition one div to show and if option two is selected I would like condition two div to show.
$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
if ($("id=[option-one]").is(":checked")) {
$('#visible-condition-one').show("slow");
} else if ($("id=[option-two]").is(":checked")) {
$('#visible-condition-two').show("slow");
};
});
<div id="always-visible">
<label class="control-label">Would you like option 1 or option 2</label><br>
<label class="radio-label"><input type="radio" id="option-one" name="option-info"> Option 1</label>
<label class="radio-label"><input type="radio" id="option-two" name="option-info"> Option 2</label>
</div>
<div id="condition-one">
<label class="control-label">If you pick option 1, you see this div</label><br>
<label class="radio-label"><input type="radio" id="option-three" name="option-info-group-two"> Option 3</label>
<label class="radio-label"><input type="radio" id="option-four" name="option-info-group-two"> Option 4</label>
</div>
<div id="condition-two">
<label class="control-label">If you pick option 2, you see this div</label><br>
<label class="radio-label"><input type="radio" id="option-five" name="option-info-group-three"> Option 5</label>
<label class="radio-label"><input type="radio" id="option-six" name="option-info-group-three"> Option 6</label>
</div>

$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
$("#option-one").on("change", function() {
if($(this).is(":checked")) {
$('#condition-one').show("slow");
}
});
$("#option-two").on("change", function() {
if($(this).is(":checked")) {
$('#condition-two').show("slow");
}
});
});
In your code, the action must be taken on user input, in this case, a radio box. You must attach a 'change' event to your radio boxes and when user changes status, the callback function is triggered.

How about the following:
//Cache our deciding radio buttons
var $radio = $('#always-visible :radio'),
//An array of the available radio/div identifiers
ids = ['one', 'two'];
//Bind an event to your deciding radio buttons
$radio.change(function(){
//That will loop through your radio buttons
$.each(ids, function(_, n){
//See if this one is checked
var checked = $('#option-' + n).prop('checked');
//If so, show the relevant block, otherwise hide it
$('#condition-' + n).toggle(checked);
});
//Trigger the event on page load
}).change();
JSFiddle

i just did something similar(working)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
$(".radio-label").on("change", function() {
if ($('.radio-label#1').is(':checked')) { // if the radiolabel of id=1 is checked
$('#condition-one').show("slow"); //show condition one
$('#condition-two').hide();
} else if ($(".radio-label#2").is(":checked")) {
$('#condition-two').show("slow");
$('#condition-one').hide("slow");
}
});
});
</script>
</head>
<body>
<input type="radio" class="radio-label" id="1" name="option-info"></input>
<input type="radio" class="radio-label" id="2" name="option-info"></input>
<div id="condition-one">
test1
</div>
<div id="condition-two">
test2
</div>
</body>

Need a way to integrate an Invert function(Check All/Uncheck All) through radio buttons - for the Checkbox group

Am relatively new to what I am doing here. I am just putting together stuff with what I find here and other open resources.
The problem I am having is - With the current setup a person can choose a radio button and check a couple boxes and goto the other radio button option and choose boxes under that. I am trying to get the Checkboxes to be All Checked when someone selects the radion option and UncheckALL when the person chooses another option on the radio button group.
So if I select option 'a' under 'GENERAL' and then goto 'DETAILED' - 'a' should be unchecked.
Heres the code I am using in JFiddle
HTML:
<div id="RadioWidget">
<label><input type="radio" name="chkboxs" value="General" />General Clean</label>
<label><input type="radio" name="chkboxs" value="Detailed" />Detailed Clean</label>
<label><input type="radio" name="chkboxs" value="Commercial" />Commercial Clean</label>
</div>
<div id="General" class="desc">
<p class="maintextBlue">General
<label><input type="checkbox" name="GeneralOptn[]" value="a" />a</label>
<label><input type="checkbox" name="GeneralOptn[]" value="b" />b</label>
</p>
</div>
<div id="Detailed" class="desc">
<p class="maintextBlue">Detailed
<label><input type="checkbox" name="DetailedOptn[]" value="a" />a</label>
<label><input type="checkbox" name="DetailedOptn[]" value="b" />b</label>
</p>
</div>
<div id="Commercial" class="desc">
<p class="maintextBlue">Commercial
<label><input type="checkbox" name="CommercialOptn[]" value="a" />a</label>
<label><input type="checkbox" name="CommercialOptn[]" value="b" />b</label>
</p>
</div>
Jscript:
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='chkboxs']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
This was a piece of script I found that inverts the checkbox state. But not sure how to integrate it to the radio button. this snippet was working off a onClick() fn for a button.
$("A[href='#invert_selection']").click( function() {
$("#" + $(this).attr('rel') + " INPUT[type='checkbox']").each( function() {
$(this).attr('checked', !$(this).attr('checked'));
});
return false;
});
Any help is much appreciated...

this requires you to add IDS to your input fields... but it would work.
If you want to control multiple input fields you can always uses classes to..
jQuery("#generalA").click(function(){
if(jQuery(this).is(':checked')){
// is checked do some stuff if you want
}else{
// is mot checked uncheck the checkbox with an ID of #detailedA
jQuery('#detailedA').prop('checked', false);
}
return false;
});

The above response by AndrewMac helped.
I just had to figure out a way it helped my existing setup.
Below is the small addition I did to get the desired setup - this way it actually disables all the unnecessary inputs thereby eliminated from the final send out of the form.
$(document).ready(function() {
$("div.desc").hide().find('input, textarea').prop('disabled', true);;
$("input[name$='chkboxs']").click(function() {
var test = $(this).val();
$("div.desc").hide().find('input, textarea').prop('disabled', true);;
$("#" + test).show().find('input, textarea').prop('disabled', false);;
});
});
I have also updated the same on my fiddle page. Fiddle
Thanks for the help AndrewMac - Sorry for the long time to post this response/answer.