通过动态更改的属性选择元素

Question

由@Grundy 解决，帖子底部的解决方案

我有一个带有单选选项的表单，其中元素是通过编程方式选择的，用户无需直接单击单选元素。

var $elem = $("input[name=type][value^=foo_]"); // Select the element with name "type" where the value starts with "foo_" (assume only one value is ever found)
if ($elem.length > 0) // If element is found then toggle the checked value of the radio value
{
    $("input[name=type][checked=checked]").attr("checked", false); // Uncheck all existing checked items
    $elem.attr("checked", true); // Check the found element from before
}

这行得通，我可以在 Chrome 的开发者工具中看到属性的变化。先前选中的输入未选中，相应的项目变为选中状态。这每次都有效，特别是多次有效（我稍后会解释为什么这很重要）。

接下来我隐藏所有未选中的单选按钮，只显示选中的单选按钮。

$("input[name=type] + label").hide();
$("input[name=type]:checked + label").show();

这在第一次选择输入时起作用。所有未选中的输入将被隐藏，选中的输入将被取消隐藏。如果第二次选择输入（立即再次选择或在两者之间选择其他选项之后），则所有输入都将被隐藏，包括选中的输入。

如果我检查$("input[name=type]:checked + label") 的匹配元素数量，它会第一次返回1，第二次返回0，这意味着只有在第二次之后才会选择它。我觉得这是因为 checked 属性此时已动态更改，但这可能不是问题的原因。

编辑 - 这是一个小提琴 fiddle 单击灰色框将显示用户单击值更改时的正常行为。每个值可以按任意顺序多次选择，但是如果您单击底部的文本（它们看起来很糟糕），它将以编程方式更改表单。它只是第一次工作，它似乎并不关心它是否被用户之前选择过。

解决方案 - 致 @Grundy 因为我知道我之前找到的 $elem 对象是正在更改的对象，所以我可以直接引用它，而不是尝试搜索具有 checked 属性的元素。所以我用这个：

var $elem = $("input[name=type][value^=foo_]"); // Created before all the changes
$elem.next("label").show(); // Referenced after all the changes

而不是使用这个：

$("input[name=type]:checked + label").show(); // Referenced after all the changes

Answer 1

尝试使用

$elem.next("label").show();

而不是

$("input[name=type]:checked + label").show();

因为$elem 被选中了你找到的复选框