使用收音機選擇顯示和隱藏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

回答

相關問題