根據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或任何東西的名稱。這就是爲什麼我必須定位該值，例如：「默認反垃圾郵件過濾器」。

另外配置選項[數字]從不相同（每個產品頁面上的不同）。所以我也不能瞄準。

總之;如果選中帶有文本「Default anti-spam filters」的單選按鈕，則應出現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

您可以爲您的選項和您的「橫幅」設置一個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> 
 
\t <div class="iradio_square-blue"> 
 
\t <input id="default-spam" type="radio" value="43" name="configoption[14]"> 
 
\t </div> 
 
\t Default anti-spam filters 
 
</label> 
 

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

Answer 3

您可以嘗試使用begins with filter在如下的jQuery 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