jquery-ui buttonset 点击事件似乎没有改变选中状态

Question

我正在使用带有 2 个单选按钮的 jquery-ui 按钮集，用于输入是/否。

var yesInput = document.createElement("input");
yesInput.type = "radio";
$(yesInput).attr('id', "njs1");
$(yesInput).prop('checked', this._data);

var noInput = document.createElement("input");
noInput.type = "radio";
$(noInput).attr('id', "njs2");
$(noInput).prop('checked', !this._data);

我在这些按钮和处理函数中调用更改事件，试图检测是否单击了选中的按钮。 buttonSet 是被制成buttonset() 的div。

$("input[type=radio]", buttonSet).change(checkHandler);

var data= $("input[type=radio]", buttonSet).eq(0).is(':checked');

在这种情况下，我预计如果单击第二个按钮，数据应该返回 false。我的理解是当我检查收音机时，它的 html 被修改为添加checked。

但是，无论调用什么，数据始终是true。

我做错了什么？如何得到正确的值？

编辑：

Example fiddle

如您所见，我可以单击“否”并仍然选中“是”。因为它是一台收音机，我希望它会表现得那样

Answer 1

为什么不使用 jQuery 创建元素的方式呢？ 使用单选按钮的点击事件。

$('<input/>').attr({type: "radio", "id": "njs1"})
.prop("checked", !this._data)
.click(checkHandler);

Answer 2

要更改输入元素的选中状态，您必须使用.prop()

设置为选中： $( "input" ).prop( "checked", true );

设置为未选中： $( "input" ).prop( "checked", false );

http://api.jquery.com/prop/

在 jQuery 1.6 之前的 .attr 确实改变了 html 属性和 dom 属性。

从 v1.6 开始，此行为已更改。

属性和属性之间的区别在 具体情况。在 jQuery 1.6 之前，.attr() 方法有时 在检索某些属性时考虑了属性值， 这可能会导致不一致的行为。从 jQuery 1.6 开始，.prop() 方法提供了一种显式检索属性值的方法，而 .attr() 检索属性。

更新

两个无线电输入应具有完全相同的值才能将它们组合在一起。

$(yesInput).attr('id', "njs1"); $(yesInput).attr('name', "toggle"); // << shared name $(noInput).attr('id', "njs2"); $(yesInput).attr('name', "toggle"); // << shared name