如何使用jQuery根據保存的單選按鈕進行切換？

我有一個表格，用戶可以保存並返回編輯。我對基於用戶對上一個問題的回答切換div的表單存在疑問。這些問題類型有多種。如果答案是'是'，則應該顯示該問題的div。如何使用jQuery根據保存的單選按鈕進行切換？

目前，divs在窗體加載時顯示，應該隱藏它們。

例子：http://jsfiddle.net/BbrwT/14/（我設置示例因此質疑一個尚未解答，其中問題二已經回答了 '否'）

<div> 
    <label>Select #1:</label> 
    <input type="radio" name="radio1" class="toggle" value="1">Yes 
    <input type="radio" name="radio1" class="toggle" value="0">No 
</div> 

<div id="details"> 
    Details #1 
</div> 

<div> 
    <label>Select #2:</label> 
    <input type="radio" name="radio2" class="toggle" value="1">Yes 
    <input type="radio" name="radio2" class="toggle" value="0" checked="checked">No 
</div> 

<div id="details"> 
    Details #2 
</div>

的Javascript：

$(document).ready(function() { 

    if($('.toggle:checked').val() != 1){ 
     $(this).parent().next('#details').hide() 
    } 

    $('.toggle').on('change',function(){ 

     var showOrHide = ($(this).val() == 1) ? true : false; 

     $(this).parent().next('#details').toggle(showOrHide); 

    }) 

});

來源

2011-11-25 Michael

不知道這是你想要的，但你可以鏈接change方法到你的change處理程序 -

$('.toggle').on('change',function(){ 

    var showOrHide = false; 

    $(this).siblings('input[type=radio]').andSelf().each(function() { 
     if ($(this).val() == 1 && $(this).prop("checked")) showOrHide = true; 
    })  

    $(this).parent().next('#details').toggle(showOrHide); 

}).change()

這應該在加載頁面時調用change方法並隱藏您的邏輯狀態應該隱藏的任何內容。我也稍微改變了邏輯，所以也檢查了兄弟單選按鈕的值。

演示 - http://jsfiddle.net/sBErV/2/

來源

2011-11-25 22:29:37 ipr101

這很接近。唯一的問題是，如果其中一個選項被選中'是'，當表單加載時div應該是可見的。請參閱http://jsfiddle.net/58xqM/2/ – Michael

我已將修復程序添加到此小提琴中 - http://jsfiddle.net/58xqM/4/ – ipr101

這似乎不能像選擇＃2一樣工作被標記爲'是'，但div在頁面加載時仍然隱藏。 – Michael

這是一個比較簡單的方法來隱藏DIV以下包含value="0"這也是checked的input一個div：

$(document).ready(function() { 
    $('div:has("input[value=0]:checked")').next('div').hide(); 
});

JS Fiddle demo。

請注意，你有兩個元素共享相同的id。爲此，根據HTML規範是無效：

ID =名[區分大小寫]: 該屬性分配一個名稱的元素。該名稱在文檔中必須是唯一的。

Reference。

更新，有輕微改善方法：

function showHide(){ 
    $('div:has("input:radio[value=0]:checked")').next('div').hide(); 
    $('div:has("input:radio[value=1]:checked")').next('div').show(); 
}; 

$(document).ready(function() { 
    showHide(); 
    $('input:radio').change(
     function(){ 
      showHide(); 
     }); 
});

JS Fiddle demo。

來源

2011-11-26 15:50:22

如何使用jQuery根據保存的單選按鈕進行切換？

回答

相關問題