jquery/javascript снимите отметку со всех флажков, кроме одного щелчка

-3

У меня есть таблица, которая имеет ряд флажков. Когда пользователь нажимает один из этих флажков, я планирую сделать небольшое ajax для заполнения таблицы в другом месте на странице.jquery/javascript снимите отметку со всех флажков, кроме одного щелчка

Но также, когда пользователь нажимает этот флажок, я хочу, чтобы все остальные флажки с тем же классом очищались, но не тот, который был нажат.

Как это сделать? (Кстати, по нескольким причинам я не хочу использовать радио-кнопки)

вот мой код для полноты

<table> 
<tr> 
    <td colspan="2">Jelly Babies</td> 
    <td></td> 
</tr> 
<tr class="roomAmPmSelectTr"> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td> 
    <td></td> 
</tr> 
<tr> 
    <td colspan="2">Jelly Tots</td> 
    <td></td> 
</tr> 
<tr class="roomAmPmSelectTr"> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td> 
    <td></td> 
</tr> 
</table>

источник

2013-12-09 Patrick Guinness

Вам не разрешено иметь несколько тегов с одинаковыми идентификаторами на той же странице. Кроме того, что вы пробовали до сих пор? SO не является фабрикой кодов, где вы можете просто разместить заказ, вам нужно продемонстрировать некоторое понимание кода. – t0mppa

Что со скрытыми полями ввода с тем же именем, что и флажки? – andi

Возможный дубликат http://stackoverflow.com/questions/3931622 –

Нечто подобное будет переключать проверенное состояние всех окон, которые не были один вы нажали на:

$(function() { 
    $('.styled').click(toggleBoxState); 
}); 

function toggleBoxState(){ 
    var clickedBox = $(this); 
    $('.styled').each(function(index) { 
     var thisBox = $(this); 
     if(clickedBox.attr('id') != thisBox.attr('id')){ 
      if(clickedBox.prop('checked')) 
       thisBox.prop('checked', false); 
     } 
    }); 
}

Просто добавьте функцию toggleBoxState в обработчик события щелчка для флажков класса .amPmCheckbox

Примечание Я также ваши идентификаторы uniqu e для того, чтобы это было одновременно совместимым, и поэтому оно будет работать.

<table> 
<tr> 
    <td colspan="2">Jelly Babies</td> 
    <td></td> 
</tr> 
<tr class="roomAmPmSelectTr"> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe1_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe1"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe2_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe2"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td> 
    <td></td> 
</tr> 
<tr> 
    <td colspan="2">Jelly Tots</td> 
    <td></td> 
</tr> 
<tr class="roomAmPmSelectTr"> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe3_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe3"/> <span class="checkboxLabel">&nbsp;AM&nbsp;</span></td> 
    <td class="amPmCheckbox"><input type="hidden" name="data[Child][remember_me]" id="ChildRememberMe4_" value="0"/><input type="checkbox" name="data[Child][remember_me]" class="styled" value="1" id="ChildRememberMe4"/> <span class="checkboxLabel">&nbsp;PM&nbsp;</span></td> 
    <td></td> 
</tr> 
</table>

Вы можете увидеть его в действии на jsfiddle: http://jsfiddle.net/8gfgp/1/

источник

2013-12-09 19:03:25

jquery/javascript снимите отметку со всех флажков, кроме одного щелчка

ответ

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