Question

我正在制作以下代码段

<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>

现在我希望如果我选择像Sun这样的单选按钮，那么显示太阳细节的页面上会出现一个diolog盒子？

Answer 1

你可以用Jquery做到这一点。

你的代码看起来应该是这样的：

$('#mydiv').click(function() {
   if($('#radio_button').is(':checked')) { 
      $('#divtobedisplayed').show() 
   }
});

Answer 2

假设细节与输入的顺序相同，您可以这样做：

$('#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
});

请注意，使用此方法的每个星球都不需要ID。

<强>段：

$('#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>

<小时/> 如果细节不一定与输入的顺序相同，但它们的ID与输入后面的文本（小写）相同，则可以这样做：

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

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

<强>段：

$('#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>

使用单选按钮选择的对话框

2 个答案: