Naseer Ahmed Naseer Ahmed - 7 months ago 20
HTML Question

dialog box using using radio button selection

I am working on following code snippet

<div id="check-boxes" >
<label class="radio-inline">
<input type="radio" name="optradio">Sun</label>
<label class="radio-inline">
<input type="radio" name="optradio">Mercury</label>
<label class="radio-inline">
<input type="radio" name="optradio">Venus</label>

</div>

<div id="planets-details">
<div id="sun">
The Sun is a star - it is not a planet. Our Sun is just like the stars we see in the night sky.
</div>
<div id="mercury">
Mercury is a small, rocky planet.
</div>
<div id="venus">
Venus is a small, rocky planet blanketed in a thick layer of yellowish clouds.
</div>


Now I want that if I select a radio button like Sun then a diolog box gets appeared on the page showing sun details?

Answer

Assuming the details are in the same order as the inputs, you could do it like this:

$('#check-boxes input:radio').click(function() {
  $('#planets-details > div').hide();      //hide all details

  $('#planets-details > div')
    .eq($(this).parent().index())          //show details for the clicked
    .show();                               //... input's label's index
});

Note that IDs are not needed for each planet using this method.

Snippet:

$('#check-boxes input:radio').click(function() {
  $('#planets-details > div').hide();      //hide all details
  
  $('#planets-details > div')
    .eq($(this).parent().index())          //show details for the clicked
    .show();                               //... input's label's index
});
#planets-details > div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check-boxes">
  <label class="radio-inline">
    <input type="radio" name="optradio">Sun
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio">Mercury
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio">Venus
  </label>
</div>

<div id="planets-details">
  <div>
    The Sun is a star - it is not a planet. Our Sun is just like the stars we see in the night sky.
  </div>
  <div>
    Mercury is a small, rocky planet.
  </div>
  <div>
    Venus is a small, rocky planet blanketed in a thick layer of yellowish clouds.
  </div>
</div>


If the details aren't necessarily in the same order as the inputs, but their IDs are the same as the text that follows the inputs (in lowercase), you could do this:

$('#check-boxes input:radio').click(function() {
  $('#planets-details > div').hide();

  $('#' + $(this).parent().text().trim().toLowerCase()).show();
});

Snippet:

$('#check-boxes input:radio').click(function() {
  $('#planets-details > div').hide();
  
  $('#' + $(this).parent().text().trim().toLowerCase()).show();
});
#planets-details > div {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check-boxes">
  <label class="radio-inline">
    <input type="radio" name="optradio">Sun
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio">Mercury
  </label>
  <label class="radio-inline">
    <input type="radio" name="optradio">Venus
  </label>
</div>

<div id="planets-details">
  <div id="mercury">
    Mercury is a small, rocky planet.
  </div>
  <div id="sun">
    The Sun is a star - it is not a planet. Our Sun is just like the stars we see in the night sky.
  </div>
  <div id="venus">
    Venus is a small, rocky planet blanketed in a thick layer of yellowish clouds.
  </div>
</div>

Comments