带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分层单选按钮

回答

相关问题