Radio Button: change z index

Question

What I'm trying to do is make it so that when a radio button is selected the z-index of the selected image is immediately changed to the highest value. I have 6 images stacked on top of each other. Each radio button is associated with with one of the images. The viewer must see the image whenever its associated radio button is selected. The "name" of each radio button is "selection." I tried this but it's not working:

`

                <div class="radio"><label><input type="radio" value="2" name="selection">Bouquet with Chocolate</label></div>
                <div class="radio"><label><input type="radio" value="3" name="selection">with Clear Vase</label></div>
                <div class="radio"><label><input type="radio" value="4" name="selection">with Clear Vase & Chocolate</label></div>
                <div class="radio"><label><input type="radio" value="5" name="selection">with Red Vase</label></div>
                <div class="radio"><label><input type="radio" value="6" name="selection">with Red Vase & Chocolate</label></div>

$(document).ready(function(){
            $('input:[type=radio][name=selection]').change(function(){
                if (this.value == '1'){
                    document.getElementById('image_1').style.zIndex =   "2";
                }
                else if (this.value == '2'){
                    document.getElementById('image_2').style.zIndex = "2";
                }
                else if (this.value == '3'){
                    document.getElementById('image_3').style.zIndex = "2";
                }
                else if (this.value == '4'){
                    document.getElementById('image_4').style.zIndex = "2";
                }
                else if (this.value == '5'){
                    document.getElementById('image_5').style.zIndex = "2";
                }
                else (this.value == '6'){
                    document.getElementById('image_6').style.zIndex = "2";
                }
            });
        });

`

Answer 1

Your input selector and if/else function are wrong.

1. Your selector does not need to have a colon between input and type

   input:[type=radio][name=selection]

2. For an if/else function, the last case else should not have a condition assigned. If you require the final condition to be defined instead of encompassing all other cases, end with an else if.

   else (this.value == '6'){ document.getElementById('image_6').style.zIndex = "2"; }

The correct code should look like this:

  $('input[type=radio][name=selection]').change(function(){
      if (this.value == '1'){
        document.getElementById('image_1').style.zIndex =   "2";
      }
      else if (this.value == '2'){
        document.getElementById('image_2').style.zIndex = "2";
      }
      else if (this.value == '3'){
        document.getElementById('image_3').style.zIndex = "2";
      }
      else if (this.value == '4'){
        document.getElementById('image_4').style.zIndex = "2";
      }
      else if (this.value == '5'){
        document.getElementById('image_5').style.zIndex = "2";
      }
      else if (this.value == '6'){
        document.getElementById('image_6').style.zIndex = "2";
      }
  });