Show/hide DIV based on radio button choice with use of jQuery

Question

I asked this question before, HOWEVER; I am now able to assign names or ID's to the label radio buttons. I couldn't do this before and that made a mess of things. Various people tried to help, but I made a complete mess out of things (sorry).

The problem with WHMCS is that is very limited in editing things, when you think outside the box.

The radio buttons / labels are as described here:

<label id="{$options.nameonly}" name="{$options.nameonly}" >
    <input type="radio" name="configoption[{$configoption.id}]" value="{$options.id}"{if $configoption.selectedvalue eq $options.id} checked="checked"{/if} />
    {if $options.name}
    {$options.name}
    {else}
    {$LANG.enable}
    {/if}
</label>

Ignore the fact that I am using same ID and name twice. It's just to show I can name them both (this wasn't the case before). I am gonna remove one of them, depending what's best to use for this situation.

The variable, which is called {$options.nameonly}, can be various things which I have added through WHMCS.

Let's say {$options.nameonly} consists out of 3 possible options (radio buttons):

1. No backups at all
2. Weekly backups with professional backup
3. Monthly backups with professional backup

In this case label ID / name would be one of the above obviously.

Now I want to display a DIV based on any of the 3 above choices:

 - <div id="weeklymsg">Weekly backup information</div>
 - <div id="monthlymsg">Monthly backup information</div>
 - And don't show a DIV when 'No backups at all' option is selected

I tried several things to get this working, however the best I could achieve was making a DIV appear, but not disappear anymore.

I want to use something similar to this for my situation:

$("label[name='Weekly backups with professional backup']").click(function(){
    $('input[type=radio]').parent().next('div').hide();
    if ($(this).is(':checked'))
    {
      var value = $(this).val();
        $('#'+value).fadeIn();
    }
    else
    {
        var value = $(this).val();
        $('#'+value).fadeOut();
    }
});

If you know a better solution or have a better idea, please do share.

I also don't know what is better in general; target the label ID or the label name? Or doesn't it matter that much?

If you need more information or details, please let me know. I already appreciate the fact that you are still reading this. :)

Sidenote; in case you didn't notice it yet, ID/name will have spaces in between for example: "Weekly backups with professional backup"

Update: added a simple JSFiddle here.

--------------------------------------------------------- UPDATE -----------------------------------------------------------

Okay, to my best knowledge the problems are caused by "iradio_square-blue". For whatever reason this makes the DIV's not showing up when selecting an option.

I did a search through all files with textcrawler and found it also to be in .js file (twice).

First occassion is here:

jQuery('input').iCheck({
    inheritID: true,
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%'
});

Second occassion is here:

jQuery.post("cart.php", 'a=cyclechange&ajax=1&i='+i+'&billingcycle='+billingCycle,
    function(data) {
        jQuery("#productConfigurableOptions").html(jQuery(data).find('#productConfigurableOptions').html());
        jQuery('input').iCheck({
            inheritID: true,
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%'
        });
    }
);

There were also some hits in the .css file related to "iradio_square-blue", however I don't think those are causing problems. But I do think the above 2 entries in the .js are causing issues with the DIV's?

Added note: I am now pretty sure, those 2 parts in the base.js are causing the issues, because when I remove them (for testing) it works 100%. It shows and hides the DIV's. So anyone knows a workaround for this...?

Answer 1

Pure Javascript, I hope this solves your issue with WHMCS and jQuery..

document.getElementById("weeklymsg").style.display = "none";
document.getElementById("monthlymsg").style.display = "none";

var p = document.querySelectorAll(".form-group input[type='radio']");
for (var i = 0; i < p.length; i++) {
    p[i].onclick = function (e) {
        var closestStr = closest(e.target, "label").id;
        if (closestStr == "Monthly backups with professional backup") {
            document.getElementById("weeklymsg").style.display = "none";
            document.getElementById("monthlymsg").style.display = "block";
        } else if (closestStr == "Weekly backups with professional backup") {
            document.getElementById("weeklymsg").style.display = "block";
            document.getElementById("monthlymsg").style.display = "none";

        } else {
            document.getElementById("weeklymsg").style.display = "none";
            document.getElementById("monthlymsg").style.display = "none";
        }
    }
}

function closest(el, selector) {
    var matchesFn;
    // find vendor prefix
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    });

    // traverse parents
    while (el !== null) {
        parent = el.parentElement;
        if (parent !== null && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

<div class="col-sm-12">
        <div class="form-group">
            <label for="inputConfigOption14"></label>

            <div>
                <label for="inputConfigOption14">What kind of backups</label>
            </div><label class="" id="No backups at all"></label>

            <div class="iradio_square-blue" style=" position: relative;">
                <label class="" id="No backups at all"><input name=
                "configoption[14]" type="radio" value="43"></label>No backups
                at all
            </div><label id="Weekly backups with professional backup"></label>

            <div class="iradio_square-blue" style="position: relative;">
                <label id=
                "Weekly backups with professional backup"><input name="configoption[14]"
                type="radio" value="43 "></label>Weekly backups with
                professional backup
            </div><label class="" id=
            "Monthly backups with professional backup"></label>

            <div class="iradio_square-blue" style="style=">
                <label class="" id=
                "Monthly backups with professional backup"><input name=
                "configoption[14]" type="radio" value="43 "></label>Monthly
                backups with professional backup
            </div>
        </div>
    </div><br>
    <br>

    <div id="weeklymsg">
        Weekly backup information
    </div>

    <div id="monthlymsg">
        Monthly backup information
    </div>

Answer 2

I hope this solves your issues..

$("#weeklymsg").hide();
$("#monthlymsg").hide();
$(".form-group input[type='radio']").on("change", function (e) {
    if($(e.target).closest("label")[0].id == "Monthly backups with professional backup"){
    $("#weeklymsg").hide();
            $("#monthlymsg").show();
    }else if($(e.target).closest("label")[0].id == "Weekly backups with professional backup"){
    $("#weeklymsg").show();
            $("#monthlymsg").hide();
    }else{
          $("#weeklymsg").hide();
            $("#monthlymsg").hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-sm-12">
        <div class="form-group">
            <label for="inputConfigOption14"></label>

            <div>
                <label for="inputConfigOption14">What kind of backups</label>
            </div><label class="" id="No backups at all"></label>

            <div class="iradio_square-blue" style=" position: relative;">
                <label class="" id="No backups at all"><input name=
                "configoption[14]" type="radio" value="43"></label>No backups
                at all
            </div><label id="Weekly backups with professional backup"></label>

            <div class="iradio_square-blue" style="position: relative;">
                <label id=
                "Weekly backups with professional backup"><input name="configoption[14]"
                type="radio" value="43 "></label>Weekly backups with
                professional backup
            </div><label class="" id=
            "Monthly backups with professional backup"></label>

            <div class="iradio_square-blue" style="style=">
                <label class="" id=
                "Monthly backups with professional backup"><input name=
                "configoption[14]" type="radio" value="43 "></label>Monthly
                backups with professional backup
            </div>
        </div>
    </div><br>
    <br>

    <div id="weeklymsg">
        Weekly backup information
    </div>

    <div id="monthlymsg">
        Monthly backup information
    </div>