Перемещение элементов TD с использованием jQuery

Я пытаюсь пройти через элементы <td>, чтобы получить боксы для сиблинга, чтобы можно было выбирать только одно изображение (я использую следующий пример, но добавил входы в таблицу для форматирования цели http://jsfiddle.net/yijiang/Zgh24/1/):Перемещение элементов TD с использованием jQuery

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');

Есть идеи?

источник

2014-06-23 user3742990

не вся точка использования 'входного типа =«радио»' не иметь множественный выбор? Стандартные входы с тем же атрибутом 'name' никогда не будут сталкиваться друг с другом (по крайней мере, в браузерах, которые следуют спецификации). – esqew

Да, радио будет исключать друг друга, если они имеют одно и то же имя, но он нуждается в этом эффекте, чтобы отразить и изображение. – amenadiel

Если я удаляю форматирование таблицы, работает .siblings - он добавляет класс и удаляет класс, как в примере jsFiddle, - но когда я добавлял входы радиокабеля в таблицу, я могу выбрать одновременно несколько радиовходов - Мне нужно только выбрать один за раз – user3742990

Попробуйте удалить класс .selected из label элементов, которые в настоящее время набор с .selected класса, а затем добавить .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

Перемещение элементов TD с использованием jQuery

ответ

Смежные вопросы