帶jQuery的Bootstrap分層單選按鈕

我對jQuery相當陌生，目前正在學習它，所以請原諒我，如果我問的是如此荒謬。帶jQuery的Bootstrap分層單選按鈕

我正在創建一個使用Bootstrap的網頁表單，它使用單選按鈕並且是分層的，所以當您爲第一個選項選擇「是」時，它將顯示下一組單選按鈕，然後當您選擇「是的「，該選項會顯示一個文本框。

這是我目前的HTML。

<div class="from-group row"> 

        <div class="col-sm-6 wireless_use"> 
         <label for="wireless_use" name="wireless_use" class="col-xs-12 col-sm-6 col-form-label">Used any wireless bridge kit?</label> 
         <div class="col-xs-12 col-sm-6"> 
          <label class="radio-inline"> 
           <input type="radio" name="wireless_use1" id="wireless_use" value="1"> Yes 
          </label> 

          <label class="radio-inline"> 
           <input type="radio" name="wireless_use0" id="wireless_use" value="0"> No 
          </label> 
         </div> 
        </div> 

        <div class="col-sm-6 hidden wireless_use_yes"> 
         <label for="wireless_use_yes" name="wireless_use_yes" class="col-xs-12 col-sm-6 col-form-label">Did you have any problems?</label> 
         <div class="col-xs-12 col-sm-6"> 
          <label class="radio-inline"> 
           <input type="radio" name="wireless_use_yes1" id="wireless_use_yes" value="1"> Yes 
          </label> 
          <label class="radio-inline"> 
           <input type="radio" name="wireless_use_yes0" id="wireless_use_yes" value="0"> No 
          </label> 
         </div> 
        </div> 

       </div> 

       <div class="form-group row hidden wireless_use_yes_problems"> 
        <label for="wireless_use_yes_problems" class="col-sm-2 col-form-label">What problems did you have?</label> 
        <div class="col-sm-10"> 
         <textarea class="form-control" rows="3" name="wireless_use_yes_problems" placeholder=""></textarea> 
        </div> 
       </div>

這裏是我的CSS相關與這個：

.hidden { 
    display: none; 
}

這裏是JS：

$(document).ready(function() { 

$('input[type="radio"]').click(function() { 
    if ($(this).attr("name") == "wireless_use1") { 
     $(".wireless_use_yes").show(); 
    } 
    if ($(this).attr("name") == "wireless_use_yes1") { 
     $(".wireless_use_yes").show(); 
     $(".wireless_use_yes_problems").show(); 

    } 
}); 

$('input[type="radio"]').trigger('click'); // trigger the event

}）;

對此問題的任何幫助或建議非常感謝！

來源

2016-09-27 FruitWinder

選擇具有特定名稱的任何輸入與jQuery我們使用

[name="xyz"]

在你的情況是必須

$("input[name='wireless_use1']")

如果要觸發改變的事件中它必須像

$("input[name='wireless_use1']").change(function(){...});

我爲你的問題創建了一個小提琴，我希望這會幫助你解決你的問題。

Fiddle Solution

- 幫助:)

來源

2016-09-27 13:25:11 Help

帶jQuery的Bootstrap分層單選按鈕

回答

相關問題