JQuery 动作取决于选择了哪个单选按钮 - if/else

Question

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);
        });
    }
}

Answer 1

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.

Answer 2

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();
}