如何创建具有不同名称的互斥单选按钮？

Question

我有一些属于同一类别的单选按钮,但我想以不同的方式命名它们并使它们互斥.我怎么做？根据选定的值,我执行不同的操作,如果它们具有相同的名称,则无法访问它们.

Answer 1

如果它们具有相同的名称,为什么不能访问它们？您可以添加ID(您应该),您可以按值区分或只计算它们并使用第n个元素.

您应该给radiobuttons指定相同的名称,以使浏览器理解它们是独占的.

你可以(但不应该)破解这个,给每个对象一个不同的名字.然后为每个对象添加一个onSelect/onClick处理程序,当事件触发时,"取消选中"其他按钮.这很脏,应该避免.

Answer 2

单选按钮需要相同的名称才能互斥.但是,如果要使用JavaScript单独操作它们,它们可以具有不同的ID属性值.

有很多方法可以使用jQuery获取所选值:

<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />


// value of checked input tag of type 'radio'
var selectedValue = $('input[type=radio]:checked').val();

// value of checked input tag having name of 'foo'
var selectedValue = $('input[name=foo]:checked').val();

// value of the first checked radio button, regardless of name
var selectedValue = $('input:checked').val();