Question

我正在尝试根据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
        }
});

这对我有用，但有问题。在这里，我只需要点击选中radio button即可切换。使用此代码可以为每个按钮工作..这意味着我想要选择下一个单选按钮然后切换到DIV。我需要做的就是我总是选择一个单选按钮，我需要切换DIV。

谁能告诉我怎么能这样做.. 谢谢。

Answer 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＆amp; 3将始终使div可见，2将始终隐藏div。

Answer 2

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

Working Fiddle

您可以添加“有效”课程，下次如果用户点击它会检测是否有“有效”课程。

Answer 3

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

$('.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这样做 - doc：http://api.jquery.com/category/effects/

EDIT2：

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/

Answer 4

我想你想让每个单选按钮分别显示每个元素？如果是这样，此代码可以运行，您可以在此fiddle

上查看

我在单个元素中添加了类以单独控制它们：

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

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

Answer 5

我不确定这是否是你想要的，但这可能会有所帮助：

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

使用选中的单选按钮切换DIV

5 个答案: