Question

我尝试遍历<td>元素以获取兄弟广播框，以便一次只能选择一个图像（我使用以下示例但添加了输入到用于格式化的表http://jsfiddle.net/yijiang/Zgh24/1/）：

HTML：

<div id="divid">
<table>
<tr>
<td><input type="radio" name="test1" id="test1" value="1" /><label>IMAGE</label></td>
<td><input type="radio" name="test2" id="test2" value="4" /><label>IMAGE</label></td>
</tr>
</table>
</div>

jQuery的：

<script>
$('#divid input:radio').addClass('input_hidden');
$('#divid label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});
</script>

我不确定如何正确遍历以确保<td>元素中一次只能选择一张图片 - 我已尝试过以下但它不起作用：

$(this).addClass('selected').parent('td').find('label').removeClass('selected');

有什么想法吗？

Answer 1

尝试从使用.selected类设置的label元素中删除类.selected，然后将.selected类添加到当前元素，

$('#divid label').click(function(){
  $('label.selected').removeClass('selected');
  $(this).addClass('selected');
});

Answer 2

您的收音机输入有不同的名称。这意味着它们可以同时被选中，因为它们是不同的单选按钮。如果你有

<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />

然后，当选择另一个浏览器时，浏览器会自动取消选择一个。

Answer 3

执行此类操作的最简单方法是从所有元素中删除该类，然后将其添加到您需要添加的类中。

所以这样的事情应该有效：

$('.selected').removeClass('selected');
$(this).addClass('selected');

Answer 4

在你的小提琴中，只需选择合适的兄弟姐妹 - http://jsfiddle.net/Zgh24/1248/

$('#sites label').click(function () {
    $(this).addClass('selected').siblings('label').removeClass('selected');
});

对于上面的表格示例，您必须稍微改变一下，因为在一个链式组中完成所有操作会导致所选项目也被删除。

$('#divid label').click(function() {
    $(this).closest('tr').find('label').removeClass('selected');
    $(this).addClass('selected');
});

http://jsfiddle.net/Zgh24/1249/

使用jQuery遍历TD元素

4 个答案: