需要帮助来优化单选按钮的代码

$('input[type="radio"]').change(function(){ 
    if ($('#subscribe').is(':checked')){ 
     $("#subNow").show(); 
     $('#oneTime').hide(); 
    } 
    if ($('#one-time').is(':checked')){ 
     $('#oneTime').show(); 
     $("#subNow").hide(); 
    } 
});

上面的代码是在单击2个单选按钮时显示和隐藏2个div。我是jquery的新手，所以想知道是否有更好的方法来编写这个相同的功能。需要帮助来优化单选按钮的代码

来源

2014-09-19 Sweta Mahapatra

该代码没有问题，除非您有一千个复选框，并且您只需要将事件绑定到几个。 – Popnoodles 2014-09-19 16:27:24

为您的收音机添加价值。然后，而不是检查每个收音机是否被选中。你可以得到值'jQuery（this）.val（）并使用像这样的值if（value =='onetime'）jQuery（'＃onetime'）。hide（）' – andrex 2014-09-19 16:31:45

如果你没有任何其他国家担心，你可以减少第二if并放置一个else

$('input[type="radio"]').change(function(){ 
    if ($('#subscribe').is(':checked')){ 
     $("#subNow").show(); 
     $('#oneTime').hide(); 
    } 
    else{ 
     $('#oneTime').show(); 
     $("#subNow").hide(); 
    } 
});

您还可以使用switch

来源

2014-09-19 16:34:10

谢谢你的帮助切换效果很好 – 2014-09-19 16:46:10

这是我会完全相同的方式做这个。唯一的其他选择是获得单选按钮的价值，但你基本上会做和你一样的事情。

来源

2014-09-19 16:36:29

这不提供问题的答案。要批评或要求作者澄清，在他们的帖子下留下评论 - 你总是可以评论你自己的帖子，一旦你有足够的[声誉]（http://stackoverflow.com/help/whats-reputation），你会能够[评论任何帖子]（http://stackoverflow.com/help/privileges/comment）。 – GibboK 2014-09-19 17:39:07

@GibboK用户基本上问他是否以正确的方式来做这件事，所以我的回答是回应了事实，即事实确实如此。所以海事组织就这个问题提供了直接的答案。 – 2014-09-19 18:06:00

如果您设置的初始状态，说#subNow { display: none; }，然后只用.toggle()方法，没有条件检查什么那么以往任何时候都...

$('input[type="radio"]').change(function(){ 
 
    $("#subNow").toggle(); 
 
    $('#oneTime').toggle(); 
 
});

#subNow { 
 
    display: none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type='radio' name='rd' checked />1 
 
<input type='radio' name='rd' />2 
 
<br /> 
 
<div id="subNow">subNow</div> 
 
<div id="oneTime">oneTime</div>

此外，

如果它们在标记中可能跟着，为什么不放弃JS并去CSS？

input[type="radio"]:nth-child(2):checked ~ #oneTime, 
 
#subNow 
 
{ 
 
    display: none; 
 
} 
 

 
input[type="radio"]:nth-child(2):checked ~ #subNow{ 
 
    display: block; 
 
}

<input type='radio' name='rd' checked />1 
 
<input type='radio' name='rd' />2 
 
<br /> 
 
<div id="subNow">subNow</div> 
 
<div id="oneTime">oneTime</div>

来源

2014-09-19 16:39:24 LcSalazar

我打算回复相同的+1 – 2014-09-19 16:44:48

，你甚至可以做'$（“＃subNow，#oneTime）.toggle（）;' – gkc 2014-09-19 16:49:33

一种方法是使用普通类和数据属性

$(".rads").on("change", '[type="radio"]', function (e) { 
 
     var show = $(this).data("show"); 
 
     $(".details").hide().filter(show).show(); 
 
    });

.details { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="rads"> 
 
     <input type="radio" id="x" name="rad" data-show=".foo" /> 
 
     <label for="x">A</label> 
 
     <input type="radio" id="y" name="rad" data-show=".bar" /> 
 
     <label for="y">B</label> 
 
    </div> 
 
    <div class="foo details">Apple</div> 
 
    <div class="bar details">Bacon</div>

还有用纯CSS解决方案：检查选择。

来源

2014-09-19 16:47:11 epascarello

需要帮助来优化单选按钮的代码

回答

相关问题