2011-12-19 115 views
-2

編輯*下面的答案解決了問題,如果有人有同樣的問題。單選按鈕取消選中

我的單選按鈕的小問題我有三條線,每條線都有3個單選按鈕,我希望用戶能夠檢查前兩條線上的任何單選按鈕,但只能在每條線上選擇一個選項:

例如

用戶只能選擇來自「keystage1yr1」一個選項,並可以只選擇從「keystage1yr2」一個選項。這一切都工作正常,因爲他們有相同的「名稱」,所以通過defualt用戶只能爲每一行選擇一個。

我曾嘗試:

Deselect Radio Button if another one is selected

How do I deselect a whole group of radio buttons when a user clicks on some other button?

但要知道運氣,雖然他們可能會幫助其他人。

<input class="radio" type="radio" name="keystage1yr1" value="Paper" /> <span>&#163;25</span> 
<input class="radio" type="radio" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span> 
<input class="radio" type="radio" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" name="keystage1yr2" value="Paper" /> <span>&#163;25</span> 
<input class="radio" type="radio" name="keystage1yr2" value="CD" /> <span>&#163;25 excl VAT</span> 
<input class="radio" type="radio" name="keystage1yr2" value="Paper & CD" /> <span>&#163;40 excl VAT</span> 

<input class="radio" type="radio" name="keystage1save" value="Paper" /> <span>&#163;47.50</span> 
<input class="radio" type="radio" name="keystage1save" value="CD" /> <span>&#163;47.50 excl VAT</span> 
<input class="radio" type="radio" name="keystage1save" value="Paper & CD" /> <span>&#163;75 excl VAT</span> 

在此先感謝。

+0

試過大部分已previosully發佈,但沒有一個答案似乎工作,因爲他們都是爲我的兩個選項是3 :) – Matt 2011-12-19 16:52:23

+2

你又試過了什麼?我們在這裏不介意讀者。提供參考。 – 2011-12-19 16:54:23

+0

只需使用javascript函數取消選擇您想要取消選擇的單選按鈕... – cdeszaq 2011-12-19 16:55:14

回答

1

下面是一些JavaScript應該幫助你:

// Simply caching the dom queries for speed 
$yearstages = $('input[name="keystage1yr2"],input[name="keystage1yr1"]'); 
$savestages = $('input[name="keystage1save"]'); 
// I only attach one handler to some parent element: 
$('#radios').on('change', 'input', function() { 
    if (this.name == "keystage1save") { 
     $yearstages.filter('input:checked').prop('checked', false); 
    } else { 
     $savestages.filter('input:checked').prop('checked', false); 
    } 
}); 

這個工作的一個例子:http://jsfiddle.net/CUTnY/

相關問題