javascript - 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是被制成的 div buttonset()。

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

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

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

然而，不管叫什么，数据总是true.

我究竟做错了什么？如何获得正确的值？

编辑：

示例小提琴

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

Answer 1

要更改输入元素的选中状态，您必须使用.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

Answer 2

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

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