2011-12-19 93 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/