當單選按鈕被選中時添加jquery

我在一個組中有兩個單選按鈕。首先檢查您是否通過html中的'checked'來訪問該頁面。當單選按鈕被選中時添加jquery

我想使用javascript來調整一些css（通過javascript，而不是通過添加一個類）。因此，如果第一個被選中，我想要某個班級獲得display:none和另一個班級display:block，但是當第二個單選按鈕被選中時，我只想要與其他單選按鈕相同，反之亦然。

我的HTML是：

<li><input type="radio" name="kosten" id="maand" checked><label for="maand">per maand</label></li> 
<li><input type="radio" name="kosten" id="jaar" ><label for="jaar">per jaar</label></li>

我嘗試了一些jQuery的，但我真的很糟糕吧。

if ($('input#maand').is(':checked'){ 
$('.bedrag-jaar').css('display', 'none'); 
}

div的一些示例我想顯示並消失。

<li><strong><span class="bedrag-maand">some text</span> <span class="bedrag-jaar">some other text</span></strong></li>

你有什麼想法我可以得到這個工作？

來源

2013-10-18 Maartje

你'if'缺少一個右括號。這是張貼在這裏嗎？ – Harry

可能的重複http://stackoverflow.com/questions/4674020/jquery-toggle-div-with-radio-buttons – Tim

@哈利它是不正確的。只有編輯錯過了最後一個。我試圖編輯她的代碼，但它至少需要6個字符才能更改。所以我放棄了。 – Dvir

嘗試像

jQuery(function(){ 
    var $spans = $('span[class*="bedrag"]').hide(); 
    $('input[name="kosten"]').change(function(){ 
     $spans.hide(); 
     $spans.filter('.bedrag-' + this.id).show(); 
    }) 
})

演示：Fiddle

這是可以做到多厲害，如果你能像

<li><strong><span class="bedrag bedrag-maand">some text</span> <span class="bedrag bedrag-jaar">some other text</span></strong></li>

然後

添加附加類的 bedrag-*元素

jQuery(function(){ 
    var $spans = $('.bedrag').hide(); 
    $('input[name="kosten"]').change(function(){ 
     $spans.hide(); 
     $spans.filter('.bedrag-' + this.id).show(); 
    }) 
})

演示：Fiddle

來源

2013-10-18 09:48:10

非常感謝！！我幾乎能夠正常工作。我只剩下一個問題。因爲第一個單選按鈕是自動選擇的，所以我想在訪問頁面時使用自動跳轉功能。當我現在訪問時，它不顯示。我試圖調整'var $ span = $（'。bedrag'）。hide（）;'在你的代碼中。bedrag-jaar，但通過訪問頁面可以，但是當我點擊第二個單選按鈕時，兩個價格都會顯示出來。您是否知道在切換單選按鈕之前自動顯示'毛巾臂'跨度的方法？ – Maartje

@Maartje請參閱http://jsfiddle.net/arunpjohny/gFahm/2/或http://jsfiddle.net/arunpjohny/US3tP/2/ –

非常感謝！ – Maartje

下面是代碼，並嘗試這個辦法：

$("input[type=radio]").on("click",function(){ 
    if ($('#maand').is(':checked')){ 
     $('.bedrag-maand').css('display', 'block'); 
     $('.bedrag-jaar').css('display', 'none'); 
    } else { 
     $('.bedrag-jaar').css('display', 'block'); 
     $('.bedrag-maand').css('display', 'none'); 
    } 
});

JSFIDDLE

來源

2013-10-18 10:12:05

當單選按鈕被選中時添加jquery

回答

相關問題