We Keep Coding

JQuery actions depending on which radio button is selected - if/else

I believe that this should be quite simple, and I thought that I was on to something, but its just not working. Forgive me, as Javascript is not my forte.
I just want the main button (Get Your New Rate) to do one of two things, based on whether the user selects YES or NO to the last of the 3 questions (these are styled radio buttons).
Thanks in advance for your time!
Here is the page in progress:
http://atomcrayon.com/mediaforce/refinance_go_v3.1/go.html
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
<script type='text/javascript'>
function CheckLicense() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if(licenseYes.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
}
else if(licenseNo.checked) {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}

Here a working sample:
$(function() {
$(".getRate").click(function() {
var licenseYes = document.getElementById("radioLicenseYes");
var licenseNo = document.getElementById("radioLicenseNo");
if (licenseYes.checked) {
console.log("yes hello");
} else if (licenseNo.checked) {
console.log("no hello");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radioSelection">
<input type="radio" id="radioLicenseYes" name="radioLicense"><label for="radioLicenseYes" class="radioYes">YES</label>
<input type="radio" id="radioLicenseNo" name="radioLicense"><label for="radioLicenseNo" class="radioNo">NO</label>
</div>
<button class="getRate">Get Your New Rate</button>
With jQuery you can easily add an event listener and run your if statements. What is wrong with your code: You have created a javascript function, but you never call it! In your function, you have a bit of jquery that will do the trick just fine (with a few modifications). You don't need to make a named function like: function getBla(). jQuery does that for you. I have simplified the code for demonstration purposes.

try:
function CheckLicense() {
if ($('input[name=radioLicense]:checked').length !=0 ) {
if ($('input[name="radioLicense"]:checked').val() == "YES"){
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#loadingAnim").delay(500).fadeIn(1).delay(7000).fadeOut(500);
$("#loading1").delay(500).fadeIn(500).delay(1500).fadeOut(500);
$("#loading2").delay(3000).fadeIn(500).delay(1500).fadeOut(500);
$("#loading3").delay(5500).fadeIn(500).delay(1500).fadeOut(500);
$("#qualify").delay(8000).fadeIn(500);
$("#redirecting").delay(8800).fadeIn(1);
$("#loadingAnim2").delay(8800).fadeIn(1);
});
} else {
$(".getRate").click(function() {
$("#questions").fadeOut(500);
$("#noQualify").delay(500).fadeIn(500);
});
}
}
}
$('.getRate').click(function() {
CheckLicense();
}

button is not being enabled if checkbox is on

I want to enable button only if checkbox is on. What I am doing wrong here ? Thanks in advance..
index.html
<p><input id="agree" type="checkbox" /> I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
custom.js
$( document ).ready(function () {
$('#agree').change(function () {
var state = $(this).attr('value');
if (state == 'on') {
$('#continue').removeAttr('disabled')
} else if (state == '') {
$('#continue').attr('disabled','disabled');
}
});
});

You could simplify it to the following:
Example Here
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
$('#agree').on('change', function () {
$('#continue').attr('disabled', !this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input id="agree" type="checkbox" />I agree</p>
<input id="continue" value="continue" type="button" disabled="disabled" />
The reason your code wasn't working was because you were using .attr(). Since there is no value attribute, you needed to use .prop(). This still wouldn't work though because the value will always return on. You need to get the checked property accessing this.checked or .prop('checked') - working example using your original snippet.
$('#agree').on('change', function () {
if (this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled', 'disabled');
}
});

Try this:
$( document ).ready(function() {
$('#agree').change(function() {
if(this.checked) {
$('#continue').removeAttr('disabled')
} else {
$('#continue').attr('disabled','disabled');
}
});
});

If you want to check if input has checked :
state = $(this).prop( "checked" );
this returns boolean value (true if checked or false if unchecked).

Firing an event after .slideDown

I have a nested accordion like so:
<script>
$(document).ready(function(){
var parentDivs = $('#standard div'),
childDivs1 = $('#standard h4').siblings('div');
childDivs2 = $('#standard h5').siblings('div');
$('#standard h3').click(function () {
parentDivs.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown({easing:'easeOutQuad', duration:1000});
} else {
$(this).next().slideUp({easing:'easeOutQuad', duration:1000});
}
});
$('#standard h4').click(function () {
childDivs1.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown({easing:'easeOutQuad', duration:1000});
} else {
$(this).next().slideUp({easing:'easeOutQuad', duration:1000});
}
});
$('#standard h5').click(function () {
childDivs2.slideUp();
if ($(this).next().is(':hidden')) {
$(this).next().slideDown({easing:'easeOutQuad', duration:1000});
} else {
$(this).next().slideUp({easing:'easeOutQuad', duration:1000});
}
});
});
</script>
The content div's contain radio buttons:
<p class="radioBtn">
<label for="input-1-1">Yes </label> <input id="input-1-1" name="clause" data-completed-id="1" value="1" type="radio" checked/>
</p>
<p class="radioBtn">
<label for="input-1-2">No </label> <input id="input-1-2" name="clause" data-completed-id="1" value="0" type="radio" />
</p>
What I am trying to do is get them to fire on change using the following code:
$('input:radio[name=clause]').change(function() {
alert("Test!");
});
But nothing happens when I change the radio buttons.

Try this
$("input[name='clause']").on('change',function() {
alert("Test!");
});

Your code is OK. Try to put it in a document event, like this...
$(document).ready(function() {
$('input:radio[name=clause]').change(function() {
alert("Test!");
});
})

OK, I've worked it out. I forgot that I was using the jQuery plugin iCheck which has it's own set of callbacks.
Sorry for wasting everyones time.

I got a annoying bug in storing input value using localStorage

I want to do is to store the current inputs even if the user refresh or close the browser.
My problem is if i click Yes in the radio button and refresh the page or close the browser and reopen it the No button is checked and the Yes button is unchecked.
testing link: http://jsfiddle.net/5kcsn/124/
current script:
$(document).ready(function () {
$('#employed_v1, #employed_v0, #test').on("change", function () {
debugger;
localStorage.setItem($(this).attr("id"), $(this).val())
});
$('#employed_v1, #employed_v0, #test').each(function (ind, val) {
debugger;
if ($(val).attr("id") != "employed_v1") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
if ($(val).attr("id") != "employed_v0") {
$(val).val(localStorage.getItem($(val).attr("id")))
}
else {
if (localStorage.getItem($(val).attr("id")) == "Yes"){
$("#employed_v1[value=Yes]").prop("checked", true);}
if (localStorage.getItem($(val).attr("id")) == "No"){
$("#employed_v0[value=No]").prop("checked", true);}
}
});
$('[id="employed_v0"]').on('click', function(){
$('#test').val('');
$('#test').prop('disabled', true);
});
$('[id="employed_v1"]').on('click', function(){
$('#test').prop('disabled', false);
});
});

To store the check state you should use the checked attribute.
However, here is a modified version :
$(document).ready(function () {
$('#employed_v1, #employed_v0').on("change", function () {
localStorage.setItem('employed', $(this).attr("id"))
});
$('#' + localStorage.getItem('employed')).attr('checked', true);
});

There are many things to consider here. First, the change-event is only fired on the one radiobutton that is clicked, and you are storing the value of the radiobutton to localstorage. But that information is the same that is already present in the HTML, so it really doesn't serve the purpose. The radiobuttons are grouped by the name-attribute, so you could store only one variable that tells which value of the radiobuttons is the selected one, here is an example:
Html:
<input type="radio" name="employed" id="employed_v1" value="Yes" required="required" class="js-store" />Yes
<br />
<input type="radio" name="employed" id="employed_v0" value="No" required="required" class="js-store" />No
<br>
<input type="text" name="test" id="test" class="js-store" />
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.js-store').on("change", function () {
if ($(this).is(":radio")) {
localStorage.setItem($(this).attr("name"), $(this).val());
}
else {
localStorage.setItem($(this).attr("id"), $(this).val());
}
});
$(".js-store").each(function() {
if ($(this).is(":radio")) {
var value = localStorage.getItem($(this).attr("name"));
if (value) { $(this).prop("checked", value === $(this).val()); };
}
else {
var value = localStorage.getItem($(this).attr("id"));
if (value) {$(this).val(value);}
}
});
});
</script>

Change variable value when checkbox is checked/unchecked

I was trying to change the value of an variable according to the status of an checkbox
here is my code sample
<script type="text/javascript">
if(document.getElementByType('checkbox').checked)
{
var a="checked";}
else{
var a="not checked";}
document.getElementById('result').innerHTML ='result '+a;
</script>
<input type="checkbox" value="1"/>Checkbox<br/>
<br/>
<span id="result"></span>
Can you please tell me whats the problem with this code.

Try this:
if (document.querySelector('input[type=checkbox]').checked) {
Demo here
Code suggestion:
<input type="checkbox" />Checkbox<br/>
<span id="result"></span>
<script type="text/javascript">
window.onload = function () {
var input = document.querySelector('input[type=checkbox]');
function check() {
var a = input.checked ? "checked" : "not checked";
document.getElementById('result').innerHTML = 'result ' + a;
}
input.onchange = check;
check();
}
</script>
In your post you have the javascript before the HTML, in this case the HTML should be first so the javascript can "find it". OR use, like in my example a window.onload function, to run the code after the page loaded.

$('#myForm').on('change', 'input[type=checkbox]', function() {
this.checked ? this.value = 'apple' : this.value = 'pineapple';
});

try something like this
<script type="text/javascript">
function update_value(chk_bx){
if(chk_bx.checked)
{
var a="checked";}
else{
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
</script>
<input type="checkbox" value="1" onchange="update_value(this);"/>Checkbox<br/>
<span id="result"></span>

Too complicated. Inline code makes it cool.
<input type="checkbox" onclick="yourBooleanVariable=!yourBooleanVariable;">

For those who tried the previous options and still have a problem for any reason, you may go this way using the .prop() jquery function:
$(document.body).on('change','input[type=checkbox]',function(){
if ($(this).prop('checked') == 1){
alert('checked');
}else{
alert('unchecked');
}

This code will run only once and check initial checkbox state. You have to add event listener for onchange event.
window.onload = function() {
document.getElementByType('checkbox').onchange = function() {
if(document.getElementByType('checkbox').checked) {
var a="checked";
} else {
var a="not checked";
}
document.getElementById('result').innerHTML ='result '+a;
}
}