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

时间:2013-10-17 05:32:29

标签: javascript jquery forms dynamic radio

由@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当用户点击值更改时,单击灰色框将显示其正常行为。可以按任何顺序多次选择每个值,但如果单击底部的文本(它们看起来很差的按钮),它将以编程方式更改表单。它只适用于第一次,它似乎并不关心用户之前是否选择它。

解决方案 - Credit @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

1 个答案:

答案 0 :(得分:1)

尝试使用

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

而不是

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

因为您找到$elem复选框