突出显示要填充的下一个单选按钮组

时间:2011-07-18 23:42:00

标签: php javascript css

这可能是一个奇怪的问题,但我有几个单选按钮组,每组都有标签。当一个单选按钮组被填充时,我想要按顺序突出显示要填充的下一个组的标签。因此,当第一个单选按钮组被填充时,它将通过突出显示它的标签来显示下一个要填充的组。请告诉我使用CSS和Coding让我走向正确的方向。谢谢你

2 个答案:

答案 0 :(得分:1)

你会考虑使用jQuery吗?因为它有一个名为next()的简洁功能,可以帮助您选择下一个兄弟元素。

答案 1 :(得分:1)

你必须使用javascript来做这样的事情。首先,您必须使用增量名称创建您的radiobutton,如:

<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
<hr>
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer"> Beer<br>
<input type="radio" name="group2" value="Wine" checked> 

例如,如果您使用jQuery,则可以监听更改:

$('input').change(function(element){
    var index = parseInt($(element).attr('name').replace("group", ""));
    $('input[name="group' + (index + i) + '"]').first().focus();
});

此函数在值更改时将事件侦听器附加到每个输入元素,它从生成用户的元素中获取当前组编号,并将焦点放在下一组中的第一个元素上。我没有尝试过,但它应该工作。我不确定无线电类型的输入是否会改变事件,但您可以以相同的方式使用click事件

希望有所帮助