JQuery Clic на кнопку радио и границы TD

Question

JQuery Clic на кнопку радио и границы TD

0

Поскольку изображение прилагается, у меня есть простая таблица HTML с переключателем в каждой ячейке. Мне нужно выделить ячейку, как только пользователь нажимает на переключатель соты.

<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/

благодаря

Abraham Petit 19 фев. 2014, в 00:41

Источник

0

создайте скрипку пожалуйста
Hendra Nucleo 18 фев. 2014, в 23:17
0

Я сделал: jsfiddle.net/PjL6v
Abraham Petit 18 фев. 2014, в 23:29

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Bill F. · Answer 1 · 2014-02-18T21-29-00.000Z

Зависит от того, что вы подразумеваете под "очерченной отдельной ячейкой". Прямо сейчас ваш код выделяет родителя элемента ввода, который является меткой. Если вы хотите выделить сама ячейку, т.е. Td, вы сделаете так:

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

См. Здесь: http://jsfiddle.net/Wg49x/

Сэр, ячейка - это просто TD, как эта <td> cell </ td>, в вашем примере jsfiddle вы указываете на родителя, но родителем является tr, мне не нужна вся строка (tr), выделенная, только клетка
Обновленный здесь: jsfiddle.net/Wg49x/2 - этот код изменяет тд, который содержит отмеченный переключатель.
Обновлен снова, так что теперь все работает: jsfiddle.net/Wg49x/4

Ryan Brodie · Answer 2 · 2014-02-18T21-13-00.000Z

Вы не можете дать границу элементу переключателя: см. Здесь, как стилизовать такие элементы.

Короче говоря, назовите ярлык радио:

$('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' });

Сэр, граница требуется для TD, радио находится в пределах TD
Конечно, а приведенный выше код устанавливает для родительского элемента td сплошную черную рамку размером 4 пикселя?

Ali MasudianPour · Answer 3 · 2014-02-18T20-50-00.000Z

Сделай это:

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

Когда вы говорите input:radio[name="V14 click, вы должны делать свои манипуляции на элементе, который был нажат, а не на всех элементах. Поэтому используйте функцию $(this) в вашей функции click.

input:radio[name="V14"] ли вы все input:radio[name="V14"] внутри функции щелчка this ?