Question

我有这个代码，我需要的是在选择一个单选按钮时我要显示subscription_rate div。目前两个主DIV一起显示。我需要在单击单选按钮时保持hide subcription_rate div。

希望有人帮我解决这个问题。

到目前为止这是我的代码......

<div class="form-element-row">
    <div class="first-child">
        <label for="name">Registration Period<img alt="required" src="images/required_star.png" />:</label>
    </div>
    <div class="last-child">
        <input type="radio"  name="period"  value="1" />1 Year
        <input type="radio"  name="period"  value="2" />2 Years
        <input type="radio"  name="period"  value="3" />3 Year                              
    </div>
</div>

<div class="subscription_rate">
    <div class="first-child">
        <label>&nbsp;</label>
    </div>
    <div class="last-child">
        <table>
          <tr>
            <th>Subscription Rate</th>
            <th>1 Year</th>
            <th>2 Years</th>
            <th>3 Years</th>
          </tr>
          <tr>
            <td style="text-align: left;">Lanka Institute Rates for Tutors within their subscription period.</td>
            <td width="18%">Rs.3000</td>
            <td width="18%">Rs.4500<br /><span>Save 25%</span></td>
            <td width="18%">Rs.7500<br /><span>Save 50%</span></td>
          </tr>
        </table>
    </div>
</div>

Answer 1

您需要使用单选按钮绑定change事件处理程序并使用show() / hide()函数。

Live Demo

$('.subscription_rate').hide();
$('[name=period]').change(function(){
    $('.subscription_rate').show();
});

要在更改辐射按钮之间进行操作，您可以使用toogle()

<强> Live Demo

$('.subscription_rate').hide();
$('[name=period]').change(function(){
  $('.subscription_rate').toggle();    
});

Answer 2

首先隐藏css中的div：

display:none;

然后使用这个脚本：

$('input[name="period"]').change(function(){
  $('.subscription_rate').slideDown('slow'); // .slideDown(800);
});

Answer 3

首先在jquery中使用.hide()隐藏它，并在用户点击单选按钮后显示它时使用.show()，

$(document).ready(function(){
     $('.subscription_rate').hide(); // hide the div first
     $('input[type=radio]').change(function(){
        if($('input[type=radio]:checked').val()==1){ //check which radio button is clicked, here its 1
            $('.subscription_rate').hide();
        }else if($('input[type=radio]:checked').val()==2){
            $('.subscription_rate').fadeIn("slow"); // show the div with fadeIn
        }else if($('input[type=radio]:checked').val()==3){
            $('.subscription_rate').hide();
        }else{
            $('.subscription_rate').hide(); // if in any case radio button is not checked by user hide the div
            }
    });
});

JSFIddle demo

选择单选按钮后显示div

3 个答案: