编辑：

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的名称或任何内容。这就是我必须定位该值的原因，例如：“默认反垃圾邮件过滤器”。

此外，配置[编号]永远不会相同（每个产品页面上都不同）。所以我也不能把它作为目标。

总之;如果选择了带有“默认反垃圾邮件过滤器”文本的所选单选按钮，则应显示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 begins with filter上使用selector，如下所示：

$("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

您可以为您的选项和＆＃34;横幅＆＃34;设置ID。所以你可以通过jQuery处理＆＃34; select＆＃34; -event。请参阅下面的示例代码。

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

3 个答案:

编辑：