Change button link dynamically when specific radios from 2 different groups are selected

I'm trying to write this:

when radio button 2 from Group 1 AND radio button 2 from Group 2 are selected
    replace Continue button with special link, dynamically while still on page
else
    keep/rewrite with this standard link, also on page

So that no matter what combo from two groups is selected...

GROUP 1
Radio1 / Radio2

GROUP 2
Radio1 / Radio 2

If Radio 2 + Radio 2 are selected, the link in the Continue button will auto change, and when any other combo is selected, it will immediately change back to the default link.

I have this:

$(document).ready(function () {
    $('input[type="radio"]:checked').each(function() {
         if ($('#select_btn_forSelect2').is(':checked') && $('#select_btn_forSelectOther2').is(':checked')) {
             alert("Both are currently checked");
             $('.continue-button').replaceWith('<a class="btn btn-primary pull-right" href="/link1">' + "Continue" +'</a>');
         } else {
             alert("Only one, or neither of these was clicked");
             $('.continue-button').replaceWith('<a class="btn btn-primary pull-right" href="/link2">' + "Continue" +'</a>');
         }
    });
});

But it doesn't work. What am I doing wrong? Thanks in advance.

Answers 1

  • $(document).ready(function() {
    
    
      $('input[type="radio"]').each(function() {
        $(this).change(function() {// catch the check status on radio button change.
          if ($('#select_btn_forSelect2').is(':checked') && $('#select_btn_forSelectOther2').is(':checked')) {
            alert("Both are currently checked");
          } else {
            alert("Only one, or neither of these was clicked");
          }
        });
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <input type='radio' name='group1' id='select_btn_forSelect' />
    <input type='radio' name='group1' id='select_btn_forSelect2' class='checked' />
    <br>
    <input type='radio' name='group2' id='select_btn_forSelectOther' />
    <input type='radio' name='group2' id='select_btn_forSelectOther2' class='checked' />
    
    
    <input type='button' value='button' name='group2' class='continue-button' />

    Check this out


Related Articles