logo标签列表

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

jquery
3
我正在尝试根据单选按钮的选择来切换一个
元素。这是我的代码...
<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
        }
});

这对我有用但是有问题...在这里，我只需要在选择的 单选按钮 上切换。使用这段代码时每个按钮都会起作用..也就是说，假设我想选择下一个单选按钮，那么它会将 DIV 切换下来。我需要做的是无论何时我选择单选按钮，我都需要切换上面的 DIV。

有人可以告诉我如何做到这一点吗？ 谢谢。

你想要一个单选按钮来使一个div始终可见，另一个则始终隐藏且不要切换吗？这是你想要的吗？ - Mehavel
5个回答
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。
这段代码没有按照我的预期方式工作。当检查下一个按钮时，它会切换下面的 DIV。 - TNK
例如，如果有3个单选按钮，您对这三个按钮有什么要求？ - Raja Asthana
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();
     }
     }
});

Working Fiddle

您可以添加类 'active'，下次用户点击时，它会检测是否具有类 'active'。

你想要淡出（fadeOut()）还是滑动消失（slideUp()）？ - Muhammad Talha Akbar
现在请查看http://jsfiddle.net/3UBE4/1/，伙计，还有一个问题，当您单击其他按钮时，您希望它向下滑动还是保持原样？ - Muhammad Talha Akbar
第一次工作正常，但第二次需要点击两次才能切换到上一个状态。 - TNK
让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/23153/discussion-between-aspiring-aqib-and-tharanga-nuwan - Muhammad Talha Akbar
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');
    }
});

编辑：

这里有一个工作示例的fiddle：http://jsfiddle.net/AVgzW/ - 请注意，它是slideDown而不是toggleDown - 如果需要，可以使用slideUp - 文档：http://api.jquery.com/category/effects/

编辑2：

1如果已经选择并单击它，则在切换时显示/隐藏div/text。

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

3任何的初始选择都不会显示文本，但一旦选择并再次点击，就会显示文本。

$('.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/ 查看。

如果这不是您想要的效果，请提供更多细节/清晰的说明所需的结果，我们一定会帮助您！ - Mark Schultheiss
我需要为选定的按钮添加效果切换上下功能。当我勾选新的按钮时，它应该向上切换。 - TNK
1
我认为您希望每个单选按钮分别显示每个元素？如果是这样，此代码有效，并且您可以在此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>

这个 JavaScript 仅会显示与你所选单选按钮相关的项目。
$('.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();
});

我建议，如果您希望表格看起来漂亮且具有炫酷的过渡效果，则不要使用表格元素。
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
        }
});})
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接