如果单选按钮被选中显示事业部 - 8单选按钮/ 8的div - 这可以被简化？ [英] If Radio Button is Selected Show Div - 8 Radio Buttons / 8 Divs - Can this be simplified?
问题描述
基本上，我想8单选按钮。以及如果选择一个无线电按钮，然后一个div如下所示。如果选择了另一个按钮另一个div所示。只有在每次显示一个分区，如果没有选择按钮（开始），则没有表现出的div。
这是我的HTML是相当标准，我并不想改善这个我需要的东西。
＆LT;形式ID ='组'＆GT;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM卡微BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM卡的微型BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM-MAXI-BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=SIM-MEGA-BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=手机智能微BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=电话智能迷你BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=电话智能BTN/＆GT;＆LT; /标签＆gt;
＆LT;标签＆gt;＆LT;输入类型=电台NAME =1组级=手机智能-MAXI-BTN/＆GT;＆LT; /标签＆gt;
＆LT; /表及GT;＆LT; DIV CLASS =billpay-互联网插件＆GT;
＆LT; DIV CLASS =SIM卡的微型桌面＆GT; SIM微型和LT; / DIV＆GT;
＆LT; DIV CLASS =SIM-迷你台式机＆GT; SIM迷你＆LT; / DIV＆GT;
＆LT; DIV CLASS =SIM-MAXI-桌面＆GT; SIM-MAXI＆LT; / DIV＆GT;
＆LT; DIV CLASS =SIM-MEGA桌面＆GT; SIM-MEGA＆LT; / DIV＆GT;
＆LT; DIV CLASS =手机智能微桌面＆GT;手机智能微＆LT; / DIV＆GT;
＆LT; DIV CLASS =电话智能迷你台式机＆GT;手机智能迷你＆LT; / DIV＆GT;
＆LT; DIV CLASS =手机智能桌面＆GT;手机智能＆LT; / DIV＆GT;
＆LT; DIV CLASS =手机智能-MAXI-桌面＆GT;手机智能-MAXI＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
然而，这是我的脚本，它似乎相当繁忙，我不知道之前我谨是有办法做到这一点更简单？
$（文件）。就绪（函数（）{
$（'。SIM卡的微型桌面'）隐藏（）。
$（'SIM-迷你台式机）隐藏（）。
$（'SIM-MAXI-桌面'）隐藏（）。
$（'。SIM卡的巨型桌面'）隐藏（）。
$（'。手机智能微桌面'）隐藏（）。
$（'。电话智能迷你台式机）隐藏（）。
$（'。手机智能桌面）隐藏（）。
$（'。手机智能-MAXI-桌面'）隐藏（）。
$（'＃形式组'）。点击（函数（）{
如果（'SIM微BTN'。$（）是（：勾选））{
$（'。SIM卡的微型桌面）显示（）。
}其他{
$（'。SIM卡的微型桌面'）隐藏（）。
} 如果（'SIM-迷你BTN'。$（）是（：勾选））{
$（'SIM-迷你台式机）显示（）。
}其他{
$（'SIM-迷你台式机）隐藏（）。
} 如果（$（'SIM-MAXI-BTN。'）是（：勾选））{
$（'SIM-MAXI-桌面）显示（）。
}其他{
$（'SIM-MAXI-桌面'）隐藏（）。
} 如果（'SIM-MEGA-BTN'。$（）是（：勾选））{
$（'。SIM卡的巨型桌面）显示（）。
}其他{
$（'。SIM卡的巨型桌面'）隐藏（）。
} 如果（$（'。手机智能微BTN）是（：勾选））{
$（'。手机智能微桌面）显示（）。
}其他{
$（'。手机智能微桌面'）隐藏（）。
} 如果（$（'。电话智能迷你BTN）是（：勾选））{
$（'。电话智能迷你台式机）显示（）。
}其他{
$（'。电话智能迷你台式机）隐藏（）。
} 如果（$（'。电话智能BTN）是（：勾选））{
$（'。手机智能桌面）显示（）。
}其他{
$（'。手机智能桌面）隐藏（）。
} 如果（$（）是（'手机智能-MAXI-BTN。'：勾选））{
$（'。手机智能-MAXI-桌面）显示（）。
}其他{
$（'。手机智能-MAXI-桌面'）隐藏（）。
} }）;
}）;
首先把共享类的无线按钮和 DIV 元件，其展示的内容。在我的例子我使用触发和内容分别。然后，数据属性添加到无线电识别哪些DIV应该点击显示。
缩短例如：
＆LT;形式ID ='组'＆GT;
＆LT;标签＆gt;
＆LT;输入类型=电台NAME =1组级=SIM卡微BTN触发数据相对=SIM卡的微型桌面/＆GT;
＆LT; /标签＆gt;
＆LT; /表及GT;
＆LT; DIV CLASS =billpay-互联网插件＆GT;
＆LT; DIV CLASS =SIM卡的微型桌面内容＆GT; SIM微型和LT; / DIV＆GT;
＆LT; / DIV＆GT;
然后你只需要点击一下处理程序是这样的：
$（文件）。就绪（函数（）{
$（'触发'）。点击（函数（）{
$（'内容'）隐藏（）。
$（+ $（本）。数据（'相对'）'。'）显示（）。
}）;
}）;
您也可以再使用CSS来隐藏不jQuery的的 DIV 元素 - 造型应始终在CSS中完成，因为它是关注一个更好的分离。
.content {
显示：无;
}
Basically, I want 8 radio buttons. And if one radio button is selected then a div is shown below. If another button is selected another div is shown. Only one div shown at a time and if no button selected (initially) then no divs shown.
This is my HTML which is fairly standard, I'm not trying to improve this for what I need.
<form id='group'>
<label><input type="radio" name="group1" class="sim-micro-btn"/></label>
<label><input type="radio" name="group1" class="sim-mini-btn"/></label>
<label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
<label><input type="radio" name="group1" class="sim-mega-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-btn"/></label>
<label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>
<div class="billpay-internet-add-ons">
<div class="sim-micro-desktop">sim-micro</div>
<div class="sim-mini-desktop">sim-mini</div>
<div class="sim-maxi-desktop">sim-maxi</div>
<div class="sim-mega-desktop">sim-mega</div>
<div class="phone-smart-micro-desktop">phone-smart-micro</div>
<div class="phone-smart-mini-desktop">phone-smart-mini</div>
<div class="phone-smart-desktop">phone-smart</div>
<div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>
However this is my script and it seems fairly hectic and I'm wondering before I move on is there a way to do this a bit more simple?
$(document).ready(function(){
$('.sim-micro-desktop').hide();
$('.sim-mini-desktop').hide();
$('.sim-maxi-desktop').hide();
$('.sim-mega-desktop').hide();
$('.phone-smart-micro-desktop').hide();
$('.phone-smart-mini-desktop').hide();
$('.phone-smart-desktop').hide();
$('.phone-smart-maxi-desktop').hide();
$('form#group').click(function(){
if($('.sim-micro-btn').is(":checked")){
$('.sim-micro-desktop').show();
} else {
$('.sim-micro-desktop').hide();
}
if($('.sim-mini-btn').is(":checked")){
$('.sim-mini-desktop').show();
} else {
$('.sim-mini-desktop').hide();
}
if($('.sim-maxi-btn').is(":checked")){
$('.sim-maxi-desktop').show();
} else {
$('.sim-maxi-desktop').hide();
}
if($('.sim-mega-btn').is(":checked")){
$('.sim-mega-desktop').show();
} else {
$('.sim-mega-desktop').hide();
}
if($('.phone-smart-micro-btn').is(":checked")){
$('.phone-smart-micro-desktop').show();
} else {
$('.phone-smart-micro-desktop').hide();
}
if($('.phone-smart-mini-btn').is(":checked")){
$('.phone-smart-mini-desktop').show();
} else {
$('.phone-smart-mini-desktop').hide();
}
if($('.phone-smart-btn').is(":checked")){
$('.phone-smart-desktop').show();
} else {
$('.phone-smart-desktop').hide();
}
if($('.phone-smart-maxi-btn').is(":checked")){
$('.phone-smart-maxi-desktop').show();
} else {
$('.phone-smart-maxi-desktop').hide();
}
});
});
Firstly put shared classes on both the radio buttons and the div elements which show the content. In my example I've used trigger and content respectively. Then add a data attribute to the radio to identify which div should be shown on click.
Shortened example:
<form id='group'>
<label>
<input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
</label>
</form>
<div class="billpay-internet-add-ons">
<div class="sim-micro-desktop content">sim-micro</div>
</div>
Then you only need 1 click handler like this:
$(document).ready(function(){
$('.trigger').click(function() {
$('.content').hide();
$('.' + $(this).data('rel')).show();
});
});
You can also then use CSS to hide the div elements without jQuery - styling should always be done in CSS anyway as it's a much better separation of concerns.
.content {
display: none;
}
这篇关于如果单选按钮被选中显示事业部 - 8单选按钮/ 8的div - 这可以被简化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
