使用收音机选择显示和隐藏div

我想显示一段代码，具体取决于用户通过单选按钮选择的内容。实质上，我只想在第一组按钮中选择“秒”时，我想让elevator_choice显示出来。使用收音机选择显示和隐藏div

HTML：

<div class="row" style="padding: 0 0 10px 0;"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input type="radio" name="floor" value="First">First 
     </label> 
     <label class="btn btn-default"> 
      <input type="radio" name="floor" value="Second">Second 
     </label> 
    </div> 
</div> 
<div class="row" style="padding: 0 0 10px 0; display:none;" id="elevator_choice"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input type="radio" name="elevator" value="No">No 
     </label> 
    </div> 
</div>

JQuery的：

$(document).ready(function() { 
    $("input[name$='floor']").click(function() { 
     if($(this).val() == 'First') { 
      $('#elevator_choice').hide();   
     } 
     else { 
      $('#elevator_choice').show(); 
     } 
    }); 
});

JsFiddle

来源

2014-02-11 Danconia

它为我的作品：http://jsfiddle.net/barmar/mr9ah/ – Barmar

你的代码工作正常..只显示“没有”如果“二”时，检查此链接HTTP： //jsfiddle.net/38zea/ ...也许不包括jquery.js。 – SoldierCorp

mmm，很奇怪......当我检查控制台时，该功能似乎在页面加载时运行，而不是在单击时运行。然后当我点击按钮时，它不会被调用。这可能吗？ – Danconia

Add class name to each radio input and register click event on this input, before showing check whether the text is first or not. 


<div class="row" style="padding: 0 0 10px 0;"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input class="check" type="radio" name="floor" value="First">First 
     </label> 
     <label class="btn btn-default"> 
      <input class="check" type="radio" name="floor" value="Second">Second 
     </label> 
    </div> 
</div> 
<div class="row" style="padding: 0 0 10px 0; display:none;" id="elevator_choice"> 
    <div class="btn-group" data-toggle="buttons"> 
     <label class="btn btn-default"> 
      <input type="radio" name="elevator" value="No">No 
     </label> 
    </div> 
</div> 


$(document).ready(function() { 
    $('.check').click(function() { 
     if($(this).val() == 'Second') { 
      $('#elevator_choice').show();   
     } 
     else { 
      $('#elevator_choice').hide(); 
     } 
    }); 
});

来源

2014-02-11 08:41:46 syed

好吧，我想通了这个问题。我使用的是Twitter Bootstrap，由于某些原因，Bootstrap会在按钮中添加一些样式，以便“onclick”事件不起作用。我将它更改为'onchange'，现在它可以工作。

谢谢大家

来源

2014-02-11 16:03:05 Danconia

使用收音机选择显示和隐藏div

回答

相关问题