使用jQuery遍历TD元素

我试图遍历<td>元素以获取兄弟单选框，以便一次只能选择一个图像（我正在使用下面的示例，但将输入添加到表格中进行格式化目的http://jsfiddle.net/yijiang/Zgh24/1/）：使用jQuery遍历TD元素

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>元素内的时间选择 - 我已经试过以下，但它不工作：

任何想法？

来源

2014-06-23 user3742990

没有使用'输入类型=“无线电”整点'不要有多种选择？具有相同'name'属性的标准输入永远不会相互冲突（至少在遵循规范的浏览器中）。 – esqew

是的，只要他们有相同的名字，收音机就会排除对方，但他需要这种效果来反映图像。 – amenadiel

如果我删除表格格式，.siblings的工作原理 - 它添加了类，并像jsFiddle示例一样删除类 - 但是当我将无线电框输入添加到表格中时，我一次可以选择多个无线电输入 - 我需要一次只选择一个 – user3742990

尝试从正在组建与.selected类，然后添加.selected类当前元素label元素删除类.selected，

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

来源

2014-06-23 16:53:10

这可行，谢谢。 – user3742990

+1我试图展示遍历有点太长了： - / –

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

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

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

来源

2014-06-23 16:52:53

到这样做最简单的方法是删除从所有元素中分类，然后将其添加到您需要添加到的元素中。

所以这样的事情应该工作：

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

来源

2014-06-23 16:54:02 Kolby

在你拨弄它仅仅是一个选择正确的兄弟姐妹的事情 - 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/

来源

2014-06-23 16:54:43

使用jQuery遍历TD元素

回答

相关问题