If Radio Button is Selected Show Div - 8 Radio Buttons / 8 Divs - Can this be simplified?

Question

Basically, I want 8 radio buttons. And if one radio button is selected then a div is shown below. If another button is selected another div is shown. Only one div shown at a time and if no button selected (initially) then no divs shown.

This is my HTML which is fairly standard, I'm not trying to improve this for what I need.

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

However this is my script and it seems fairly hectic and I'm wondering before I move on is there a way to do this a bit more simple?

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

Clitoris

Answer 1

Firstly put shared classes on both the radio buttons and the div elements which show the content. In my example I've used trigger and content respectively. Then add a data attribute to the radio to identify which div should be shown on click.

Shortened example:

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

Then you only need 1 click handler like this:

$(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

You can also then use CSS to hide the div elements without jQuery - styling should always be done in CSS anyway as it's a much better separation of concerns.

.content {
    display: none;
}

Example fiddle

Eyelash

Wonderful thank you. Makes sense when I see it written down but needed the help to see that. Thanks! – Clitoris

Man, If I insert values for all each hidden inputs (I am changing div to input type text), will these values be send to database? I want if they are hidden, then the values are not sent to database. Can you give me a little clarification for this. Thanks. – Rhinelandpalatinate

If you don't want the value of an input sent to the server with the other form POST data, set the disabled="disabled" property on it. – Eyelash

Answer 2

You can hide the div elements using CSS:

.billpay-internet-add-ons div {
  display: none;
}

Then you can use the className of the target to determine which div to show, hiding all sibling elements:

$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

Here's a fiddle

Overunder

Answer 3

You could use selectors to reduce the number of lines of code here.

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

Could be shortened to:

$('.billpay-internet-add-ons div').hide();

This uses the parent element to group those elements you want to hide, rather than repeating the request for each one.

Similarly, you can use your naming convention to map the items to the elements to show and hide - here is the full working example:

$(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

This example is purely based on your HTML without any changes. See it working here.

You could simplify this further if you didn't need to transform the names. You could use a data-attribute instead of changing the class names to do this.

Hanyang

Answer 4

use html5 data attribute)(i.e data-mappingclass ) pointing to corresponding div you need to show. add same class to all radio button(ie radioClass).

HTML

 <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

JS

$('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

Urbanize

Answer 5

You can firstly have everything hidden by default (except one form maybe) using CSS, which gets rid of this:

$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();

This has a negative implication for users without javascript, if you're worried - they'll never be able to see the other forms.

Next, only one radio can be checked, so just find out which one it is using:

$('input[name=group1]:checked);

But why would you do that, so you have the radios have a click handler more like:

$('#group input[type="radio"').click(function(){
    //code to show/hide form
});

Now you have a choice as to how you link your radio buttons to the different forms one way could be to use the data attribute, so you define your radios like so:

<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

Which you can access like so:

$('input[name=group1]:checked).data("form");

Now all you need to do is hide the div that was already showing, but that can be achieved with a similar use of the data attribute or by using the :visible selector.

Renovate

Answer 6

var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
}); 

http://jsfiddle.net/KaF77/2/

Ironsmith

Answer 7

I simplified it some four you. Basically you look which index the radio clicked has and then show a div with the same index. So the position of the divs has to match the radios.

Your HTML is the same as before.

Your CSS:

.billpay-internet-add-ons > div {
    display:none;
}

All your Javascript:

$(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

jsFiddle Demo: http://jsfiddle.net/cfSXY/

Equipoise