jquery单击单选按钮并边界TD

Question

如图所示，我有一个简单的HTML表格，每个单元格中都有单选按钮。一旦usr点击单元格的单选按钮，我需要勾勒出一个单元格。

<table class='TablaBlanca' border= '0'>
<tr id='V14_1'>
<td><label for='Input_V14_1'><input id ='Input_V14_1' type='radio' name='V14' value='1'     class='validateCallback'><img src='instructivo_1.png'></label></td>
</tr>

<tr id='V14_2'>
<td><label for='Input_V14_2'><input id ='Input_V14_2' type='radio' name='V14' value='2'    class='validateCallback'><img src='ThumpUp.jpg'></label></td>
</tr>

<tr id='V14_3'>
<td><label for='Input_V14_3'><input id ='Input_V14_3' type='radio' name='V14' value='3' class='validateCallback'><img src='wfi_on.jpg'></label></td>
</tr>

<tr id='V14_4'>
<td><label for='Input_V14_4'><input id ='Input_V14_4' type='radio' name='V14' value='4' class='validateCallback'><img src='instructivo_1.jpg'></label></td>
</tr>

<tr id='V14_5'>
<td><label for='Input_V14_5'><input id ='Input_V14_5' type='radio' name='V14' value='5'   class='validateCallback'><img src='instructivo_3.jpg'></label></td>
</tr>

此代码工作正常，但所有行都是概述的，但我只需勾勒出一个单元格。

$('input:radio[name="V14"]').click(function(){
    $('input:radio[name="V14"]').parent().css({ border:'' });
    $('input:radio[name="V14"]:checked').parent().css({ border:'4px solid black' });
});

任何想法？，这是合乎逻辑的，但它不起作用：

    $('input:radio[name="V14"]').css({ border:'' });
    $('input:radio[name="V14"]:checked').css({ border:'4px solid black' });

这是一个尝试的JSFiddle：http://jsfiddle.net/PjL6v/

由于

Answer 1

您无法为单选按钮元素设置边框：see here如何设置此类元素的样式。

简而言之，为收音机的标签添加样式：

$('input:radio[name="V14"] + label').css({ border:'' });
$('input:radio[name="V14"]:checked + label').css({ border:'4px solid black' });

注意+ label选择器？

或者，使用parent()设置单元格样式：

$('input:radio[name="V14"]').parent().css({ border:'' });
$('input:radio[name="V14"]:checked').parent().css({ border:'4px solid black' });

Answer 2

取决于“大纲单细胞”的含义。现在，您的代码突出显示输入元素的父级，即标签。如果你想突出显示单元格本身，即td，你可以这样做：

$('input:radio[name="V14"]:checked').closest('td').css({ 
    border:'4px solid black' 
});

见这里：http://jsfiddle.net/Wg49x/

Answer 3

这样做：

$('input:radio[name="V14"]').click(function(){
$(this).parent().css({ border:'' });
// the rest of code
});

当您说input:radio[name="V14点击时，您必须对已点击的元素进行操作。并非所有元素都匹配。因此，请在$(this)函数中使用click。