根据WHMCS / Bootstrap中的单选按钮选择显示/隐藏DIV

Question

我正在运行 Bootstrap 和 WHMCS。而且我有几个多项选择（单选按钮）。

根据选择的多项选择，我希望它显示带有附加信息的 DIV（Boostrap 警报信息）。

但是我遇到了一些问题。标签名称每次都不同。唯一相同的是选项（值）。

示例： 您想使用哪种反垃圾邮件解决方案

a) 没有反垃圾邮件解决方案

b) 默认反垃圾邮件过滤器

如果他们选择选项“B”（默认反垃圾邮件过滤器），DIV 将显示附加信息。

由于限制（以及我自己的技能），不可能定位标签，对吧？

以下是 HTML 部分的示例：

<div class="col-sm-12">
    <div class="form-group">
        <label for="inputConfigOption14">
            <div>What kind of anti-spam solution do you want to use</div>
        </label>

        <label class="">
            <div class="iradio_square-blue" style="style="position: relative;">
                <input type="radio" value="43" name="configoption[14] style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></input>
            </div>
            No anti-spam solution
        </label>

        <label class="">
            <div class="iradio_square-blue" style="style="position: relative;">
                <input type="radio" value="43" name="configoption[14] style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></input>
            </div>
            Default anti-spam filters
        </label>
    </div>
</div>

我还创建了 HTML here 的 JSFiddle。

我认为最简单的方法是定位文本值，因此如果它包含文本值“默认反垃圾邮件过滤器”，它应该显示 DIV（如果选择了不同的选项，则再次隐藏它）。

这可以通过 jQuery 实现吗？或者有没有更好的方法，如果有怎么办？

-- 跟进------

谢谢大家的回答，但我无法更改 ID 的名称或任何东西。这就是为什么我必须定位该值，例如：“默认反垃圾邮件过滤器”。

此外，configoptions[number] 永远不会相同（每个产品页面上的不同）。所以我也不能针对它。

简而言之；如果选择了带有“默认反垃圾邮件过滤器”文本的单选按钮，则应显示 DIV。

订单本身有几个不同的多项选择选项。因此，我认为仅针对多项选择是不够的。如上所述，我真的需要定位它的价值。

很抱歉造成混乱，但我真的尽力用英语解释。 :|

Answer 1

如果你想要一个纯 CSS 的解决方案，你可以在这个例子中将你的附加信息放在一个 div（“.description”）中，并在选中单选按钮时显示它。

.form-group label> .description{
    display:none;
}
.form-group input[type="radio"]:checked ~ .description{
    display:block;
}

<div class="form-group">
  <label>      
        <input type="radio" name="configoption[14]"  value="43">
    
        No anti-spam solution
        <div class="description">
            Lorem ipsum Dolor Sit Amet
        </div>
  <label>
    
</div>
<div class="form-group">
  <label>      
        <input type="radio" name="configoption[14]"  value="44">
    
        No anti-spam solution
        <div class="description">
            Some other Description
        </div>
  <label>
    
</div>

编辑：

我希望这能满足您的需求，即使将标签中的文本作为目标根本不是一个好习惯！

$("input[type='radio']").change(function(){
$label = $.trim($(this).parents('label').text());
  if($label == "No anti-spam solution"){
    $target = $("#noSolution");
  $(".info").not($target).fadeOut();
  $target.fadeIn();
  }else if($label == "Default anti-spam filters"){
    $target = $("#defaultSolution");
  $(".info").not($target).fadeOut();
  $target.fadeIn();
  }
})

.additional-info{
position:relative;  
}
.info{
  display:none;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-12">
    <div class="form-group">
        <label for="inputConfigOption14">
            <div>What kind of anti-spam solution do you want to use</div>
        </label>

        <label class="">
            <div class="iradio_square-blue" style="style="position: relative;">
                <input type="radio" value="43" name="configoption[14] style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></input>
            </div>
            No anti-spam solution
        </label>

        <label class="">
            <div class="iradio_square-blue" style="style="position: relative;">
                <input type="radio" value="43" name="configoption[14] style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"></input>
            </div>
            Default anti-spam filters
        </label>
    </div>
</div>

<!-- Your additional Info divs -->
<div class="additional-info">
<div id="noSolution" class="info">
This is the info for No anti-spam solution!
</div>
<div id="defaultSolution" class="info">
This is the info for Default anti-spam filters!
</div>
</div>

Answer 2

您可以尝试在 jquery selector 上使用 begins with filter，如下所示：

$("input[name^='configoption']").on('change',function(){
   $(".alert-info").text($(this).val()).fadeIn('slow').removeClass('hide');
});
//here it will fetch all the inputs whose name attribute begins with "configoption"
//I assume that the name `configoption` will be only given for radio buttons.

html 标记中的注意事项

在input type=radio 中，在写样式之前，您还没有在名称属性name="configoption[14] style=" 之后关闭""。

DEMO

Answer 3

您可以为您的选项和“横幅”设置一个 ID，以便您可以通过 jQuery 处理“选择”事件。请参阅下面的示例代码。

$('#default-spam').on('click', function() {
  $('#banner').toggle();
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>
	<div class="iradio_square-blue">
	  <input id="default-spam" type="radio" value="43" name="configoption[14]">
	</div>
	Default anti-spam filters
</label>

<div id="banner" class="hidden">
  Additional information
</div>