3

我正在尝试DIV根据radio buttons. 这是我的编码..

<div class="form-element-row">
    <div class="first-child">
        <label for="name">Registration Period :</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 Years                             
    </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>Rates for subscription period.</td>
            <td>$ 3000</td>
            <td>$ 4500</td>
            <td>$ 7500</td>
          </tr>
        </table>
    </div>
</div>

这是 jQuery

$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
    if($('input[type=radio]:checked')){
        $('.subscription_rate') .slideToggle('slow') // show it when user clicks the radio buttons
    }else{
        $('.subscription_rate') .fadeOut("slow");  // if in any case radio button is not checked by user hide the div
        }
});

这对我有用，但有问题.. 在这里我只需要点击 selected 来切换radio button。使用此代码，它适用于每个按钮。这意味着我只想选择下一个单选按钮，然后它会向下切换 DIV。我需要做的是始终选择一个单选按钮，我需要将DIV.

谁能告诉我我该怎么做。谢谢。

4

5 回答 5

1

这应该是一个简单的解决方案，如果它被选中，则将其向上滑动，否则将其淡出。这样，如果您通过代码更改它，它应该具有相同的效果（单选按钮不能在单击时“取消全选”，只能通过代码。

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
    if ($(this).is(':checked')) {
        $('.subscription_rate').slideDown("slow");
    } else {
        $('.subscription_rate').fadeOut('slow');
    }
});

编辑：

这是一个带有工作示例的小提琴：http: //jsfiddle.net/AVgzW/ - 注意它slideDown不是 toggleDown - 你可以使用slideUp它是需要的 - 文档：http://api.jquery.com/category/effects /

编辑2：

1 如果它已被选中并单击它，它会在切换开关上显示/隐藏 div/文本。

2 如果尚未选择（选择新选项），则将其隐藏（div 文本）

3 ANY 的初始选择不会显示文本，但一旦选择并再次单击它就会显示。

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').change(function () {
    if ($(this).is(':checked') && $(this).hasClass("activeSelection")) {
        $('.subscription_rate').slideToggle("slow");
    } else {
        $('input[type=radio]').removeClass("activeSelection");
        $(this).addClass('activeSelection');
        $('.subscription_rate').fadeOut('slow');
    }
});

小提琴：http: //jsfiddle.net/AVgzW/1/

于 2013-01-22T14:55:10.600 回答
1

我认为您希望每个单选按钮单独显示每个元素？如果是这样，此代码有效，您可以在此小提琴上查看

我向各个元素添加了类以分别控制它们：

<tr>
  <th>Subscription Rate</th>
  <th class="toggle 1yr">1 Year</th>
  <th class="toggle 2yr">2 Years</th>
  <th class="toggle 3yr">3 Years</th>
</tr>

此 js 将仅显示与您选择的单选按钮相关的项目。

$('.subscription_rate').hide(); // hide the div first
$('input[type=radio]').click(function () {
  $('.subscription_rate').show();
  $('.toggle').hide(); // if in any case radio button is not checked by user hide the div
  $('.' + $(this).val() + 'yr').show();
});

如果您希望它们看起来不错并且有花哨的过渡，我建议不要使用表格元素。

于 2013-01-22T14:58:15.013 回答
1

此代码将执行所需的功能。

    $('.subscription_rate').hide();
 $('input[type=radio]').click(function(){
     if($('input[type=radio]:checked') && $(this).attr('value')==1){
         if(!($('.subscription_rate').is(':visible'))){
             $('.subscription_rate').slideToggle('slow')
         }
     }else if($('input[type=radio]:checked') && $(this).attr('value')==2){
         $('.subscription_rate') .fadeOut("slow");
     }
    else if(!($('.subscription_rate').is(':visible'))){
       $('.subscription_rate').slideToggle('slow');
     }
});

单选按钮 1 和 3 将始终使 div 可见，而 2 将始终隐藏 div。

于 2013-01-22T14:50:20.937 回答
1 
var i = 0;
$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
     if(i==0) {
         $(this).addClass("active");
         $(".subscription_rate").slideDown();
         i++;
     }
     else {
     if($(this).hasClass("active")) {
         $(".subscription_rate").slideToggle();
     }
     else {
         $(".active").removeClass("active");
         $(this).addClass("active");
         $(".subscription_rate").show().fadeOut().fadeIn();
     }
     }
});

工作小提琴

您可以添加“活动”类，下次如果用户单击它将检测它是否具有“活动”类。

于 2013-01-22T14:52:16.510 回答
0

我不确定这是否是您要寻找的，但这可能会有所帮助：

$(document).ready(function (){
$('.subscription_rate').hide(); // hide the div first
 $('input[type=radio]').click(function(){
    if($('input[type=radio]:checked')){
        $('.subscription_rate') .show('slow') // show it when user clicks the radio buttons
    }else{
        $('.subscription_rate') .fadeOut("slow");  // if in any case radio button is not checked by user hide the div
        }
});})
于 2013-01-22T14:49:21.733 回答