Problem: I have 2 radios which is for "opt-in" and "don't opt-in" for a customer club, in the cart-page. By default nothing is selected on page-load.

How can I turn these radio buttons into 1 single checkbox which can be toggled? My plan is to hide the 2 radio buttons from the page, and have a checkbox which toggles/controls these. On page load, the "don't opt-in" radio has to be checked by default(today, nothing is selected). I managed to solve this by using jquery on page-load and run the function multiple times UNTIL the code has ran 1 time. I guess to solve it, on click, it needs to change the 'for' attribute to the one from the correct original radio button. Or, any other ideas how to solve this? I'm a beginner in jQuery so I don't have a lot of ideas... Also, I cannot change the HTML, I can only add HTML, CSS and script to the source code, but not alter the original one.

This is the HTML from the source code(can't alter this):

    <div >
        <h3>
            <span>Bli medlem og få medlemspris!</span>
        </h3>
        <div >
            <input type="radio" name="bember-register" id="agreeMembershipRadio" data-bind="checked: isRegister, checkedValue: 1" value="1" checked="checked">
            <label for="agreeMembershipRadio">
                <span>
                    <span>Jeg er/vil bli medlem av klubben og får medlemsrabatt på et stort utvalg av varer.</span>
                </span>
            </label>
            <span>
                <a href="#"  data-bind="if: isTermsAvailable">
                    <span>Se vilkår.</span>
                </a>
                <span data-bind="ifnot: isTermsAvailable"></span>
                <span>Fullfør registering på SMS etter kjøp.</span>
            </span>
        </div>
        <div >
            <input type="radio" name="bember-register" id="skipMembershipRadio" data-bind="checked: isRegister, checkedValue: 0" value="0">
            <label for="skipMembershipRadio">
                <span>
                    <span>Jeg vil ikke bli medlem av klubben.</span>
                </span>
            </label>
        </div>
    </div>

This is what I did to make it select one radio button on load:

    function hideRadio(){
        if(notRunYet){
          setTimeout(function(){
            $('#skipMembershipRadio').attr('checked', 'checked');
            $('#skipMembershipRadio').click();
            notRunYet=false;
            console.log('runComplete');
          }, 500);
        }
      }

Adding this jQuery, selects the first radiobutton which does not opt-in to the customer club.

How can I merge these 2 radios into a single checkbox, which toggles these values? Appreciate any help.

Here is what the JS looks like right now:

    $(function() {
      const memberButtons = {
          Agree: $('#agreeMembershipRadio'),
          DisAgree: $('#skipMembershipRadio')
        },
        chkBox = $('<input type=checkbox id="skipMembershipCheckbox">').appendTo(memberButtons.Agree.parent().parent());
      chkBox.parent().append('<label for="skipMembershipCheckbox" ><span >Jeg er/vil bli medlem av Norli-klubben og får medlemsrabatt på et stort utvalg av varer.</span></label><span><a href="#"  data-bind="if: isTermsAvailable"><span>Se vilkår.</span></a><span data-bind="ifnot: isTermsAvailable"></span><span>Fullfør registering på SMS etter.</span></span>');
      memberButtons.DisAgree[0].click();
      chkBox.change(function() {
        (this.checked ? memberButtons.Agree : memberButtons.DisAgree)[0].click();
      }).click();
      //$('.radio').hide();
    });

If you see 3 lines before the last, i swapped memberButtons.Agree with memberButtons.DisAgree so that when the checkbox is checked, the Agree button is selected. But i want the DisAgree to be selected on load, and checkbox unselected.

CodePudding user response：

Judging on your description, the radio buttons are still needed in the background for the page to keep working. The solution below is very specific to this example, but should do the trick. To show the workings, I have not hidden the radio buttons, but uncommenting the last line should do just that.

NB, right now it is a one way street, the radio buttons react on the checkbox, not the other way around. But that shouldn't be a problem if the radio buttons are to be hidden.

$(function(){
    const memberButtons = {Agree : $('#agreeMembershipRadio'), DisAgree:$('#skipMembershipRadio') },
    chkBox = $('<input type=checkbox id="skipMembershipCheckbox">').appendTo(memberButtons.Agree.parent().parent());
  chkBox.parent().append('<label for="skipMembershipCheckbox"><span>Jeg er/vil bli medlem av klubben</span></label>');
  memberButtons.DisAgree.click();
  chkBox.change(function(){
    (this.checked ? memberButtons.Agree : memberButtons.DisAgree).click();
  });
  
  //uncomment this to hide the radio buttons
  //$('.radio').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
        <h3>
            <span>Bli medlem og få medlemspris!</span>
        </h3>
        <div >
            <input type="radio" name="bember-register" id="agreeMembershipRadio" data-bind="checked: isRegister, checkedValue: 1" value="1" checked="checked">
            <label for="agreeMembershipRadio">
                <span>
                    <span>Jeg er/vil bli medlem av klubben og får medlemsrabatt på et stort utvalg av varer.</span>
                </span>
            </label>
            <span>
                <a href="#"  data-bind="if: isTermsAvailable">
                    <span>Se vilkår.</span>
                </a>
                <span data-bind="ifnot: isTermsAvailable"></span>
                <span>Fullfør registering på SMS etter kjøp.</span>
            </span>
        </div>
        <div >
            <input type="radio" name="bember-register" id="skipMembershipRadio" data-bind="checked: isRegister, checkedValue: 0" value="0">
            <label for="skipMembershipRadio">
                <span>
                    <span>Jeg vil ikke bli medlem av klubben.</span>
                </span>
            </label>
        </div>
    </div>