Could hiding and displaying div with jQuery for a radio option be made simpler?

Question

I have a radio input and based on the selection, the displayed result changes. I have used the css display: none; to hide the div not associated with the result and remove the css display: none; when the div corresponds to the result.

Here is the code snippet:

$(document).ready(function() {
    $("input").change(function() {

        var IVAccess = $('input[name="IVAccess"]:checked').val();
        if (IVAccess == 0) {
            $('#IVAccessBp').removeClass('displayNone');
        } else {
            $('#IVAccessBp').addClass('displayNone');
        }
        if (IVAccess == 1) {
            $('#IVAccessNBp').removeClass('displayNone');
        } else {
            $('#IVAccessNBp').addClass('displayNone');
        }

    });
    $("#apgarA2").trigger("change");
});

.displayNone {
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessB" value="0"/>
<label for="IVAccessB" class="apgarL">Option 1</label>
<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessNB" value="1" checked="checked" />
<label for="IVAccessNB" class="apgarL">Option 2</label>
<div id="IVAccessBp" class="displayNone">
   Option 1      
</div>
<div id="IVAccessNBp" class="displayNone">
   Option 2      
</div>

My question is instead of writing the logic for if (IVAccess == 0) once for value 0 and then writing again for if (IVAccess == 1) for value 1, can I write a simpler formula for both of the values? (It doesn't necessarily have to be only 2 options, somewhere may be it could be more than 2 options). I mean can this section be written in a smarter way?

var IVAccess = $('input[name="IVAccess"]:checked').val();
        if (IVAccess == 0) {
            $('#IVAccessBp').removeClass('displayNone');
        } else {
            $('#IVAccessBp').addClass('displayNone');
        }
        if (IVAccess == 1) {
            $('#IVAccessNBp').removeClass('displayNone');
        } else {
            $('#IVAccessNBp').addClass('displayNone');
        } 

Thanks in advance for the suggestion.

Answer 1

Since ther could only be two values 0 and 1, just use one single if-else:

var IVAccess = $('input[name="IVAccess"]:checked').val();
if (IVAccess == 0) {
    $('#IVAccessBp').removeClass('displayNone');
    $('#IVAccessNBp').addClass('displayNone');
} else {
    $('#IVAccessBp').addClass('displayNone');
    $('#IVAccessNBp').removeClass('displayNone');
}

Furthermore, you can use a ternary operator to decide which of the two elements gets displayNone and which does not, like so:

var IVAccess = $('input[name="IVAccess"]:checked').val();
$('#IVAccess' + (IVAccess == 0? "Bp": "NBp")).removeClass('displayNone');
$('#IVAccess' + (IVAccess == 1? "Bp": "NBp")).addClass('displayNone');

EDIT:

If there are more elements, then it's better to use a common class for the "#IVAccess??" elements so that hiding them all is only done using a single line of code. To show the corresponding element, you can either use an array of IDs and show the one that its index is the value of IVAccess, like so:

var arrayOfIDs = ['Bp', 'NBp', 'SomeOtherBp', 'YetAnotherBp'];

$("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();
    $('.IVAccessCommonClass').addClass('displayNone');                  // hide all '#IVAccess??' elements using the common class
    $('#IVAccess' + arrayOfIDs[IVAccess]).removeClass('displayNone');   // show only the one corresponding to the current value of the input using that value as an index of the array
});

Or get rid of the array and change the values of the inputs to be the IDs themselves:

$("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();           // this will be either 'Bp', 'NBp', ...
    $('.IVAccessCommonClass').addClass('displayNone');
    $('#IVAccess' + IVAccess).removeClass('displayNone');
});

Example:

$(document).ready(function() {
  $("input").change(function() {
    var IVAccess = $('input[name="IVAccess"]:checked').val();
    $('.IVAccessCommonClass').addClass('displayNone');
    $('#IVAccess' + IVAccess).removeClass('displayNone');
  });
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="radio" name="IVAccess" value="B" /> Option B</label>
<label><input type="radio" name="IVAccess" value="SomeB" /> Option SomeB</label>
<label><input type="radio" name="IVAccess" value="SomeOtherB" /> Option SomeOtherB</label>
<label><input type="radio" name="IVAccess" value="NB" checked="checked" />Option NB</label>
<div id="IVAccessB" class="displayNone IVAccessCommonClass">
  Option B
</div>
<div id="IVAccessSomeB" class="displayNone IVAccessCommonClass">
  Option SomeB
</div>
<div id="IVAccessSomeOtherB" class="displayNone IVAccessCommonClass">
  Option SomeOtherB
</div>
<div id="IVAccessNB" class="displayNone IVAccessCommonClass">
  Option NB
</div>

Answer 2

Here it is another option slightly more different than the once above.

$(document).ready(function() {
    $("input").change(function() {
        var IVAccess = Number($('input[name="IVAccess"]:checked').val());
        IVAccess ?  $('#IVAccessBp').hide() && $('#IVAccessNBp').show() : $('#IVAccessBp').show() && $('#IVAccessNBp').hide()
    });
    $("#apgarA2").trigger("change");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessB" value="0"/>
<label for="IVAccessB" class="apgarL">Option 1</label>
<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessNB" value="1" checked="checked" />
<label for="IVAccessNB" class="apgarL">Option 2</label>
<div id="IVAccessBp" hidden> 
   Option 1      
</div>
<div id="IVAccessNBp" hidden>
   Option 2      
</div>

Answer 3

You could try this:

$('#IVAccessBp').toggleClass('displayNone', IVAccess == 0 || IVAccess == 1);

Or

var values = [0,1];
$('#IVAccessBp').toggleClass('displayNone', values.indexOf(IVAccess) == -1);

You could add any value to the array values if the values could be other than 0 and 1.

Answer 4

See the comments about what each step is doing.

• I modified the markup to include a data-value to correspond to the radio values.
• Modified to include a class on the displayable areas for selection.

$(document).ready(function() {
  //select the displayable areas and cache it
  var $displays = $('.IVAccess');
  
  $("input").change(function(e) {
    //hide all of them
    $displays.addClass('displayNone');
    //find the element that matches the data-value, and show it
    $displays.filter(function(){
      return $(this).data('value') == e.target.value;
    }).removeClass('displayNone');
  });
  
  $("#apgarA2").trigger("change");
});

.displayNone {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessB" value="0" />
<label for="IVAccessB" class="apgarL">Option 1</label>

<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessNB" value="1" checked="checked" />
<label for="IVAccessNB" class="apgarL">Option 2</label>

<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessNC" value="2" checked="checked" />
<label for="IVAccessNC" class="apgarL">Option 3</label>

<input type="radio" class="apgarIn" name="IVAccess" id="IVAccessND" value="3" checked="checked" />
<label for="IVAccessND" class="apgarL">Option 4</label>

<div id="IVAccessBp" class="IVAccess displayNone" data-value="0">
  Option 1
</div>

<div id="IVAccessNBp" class="IVAccess displayNone" data-value="1">
  Option 2
</div>

<div id="IVAccessNCp" class="IVAccess displayNone" data-value="2">
  Option 3
</div>

<div id="IVAccessNDp" class="IVAccess displayNone" data-value="3">
  Option 4
</div>