jQuery Снимите все, кроме одного, когда определенный проверен

Question

Вот моя проблема ... У меня есть страница, которая загружает список клиентов, и по щелчку их имени появляется всплывающее окно, и вы можете определить, в какое время им разрешено входить в систему, вот HTML-код.

<form action="" method="post" name="access_hours">
<table width="100%">
<tr>
<td colspan="5">
<input type="checkbox" id="all" name="107" /> Check/Uncheck all
</td>
</tr>
<div id="check_107">
<tr>
<td><input type="checkbox" name="accesstimes[]" id="107" value="01"  />1AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="02"  />&nbsp;2AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="03"  />&nbsp;3AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="04"  />&nbsp;4AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="05"  />&nbsp;5AM</td>
</tr>
<tr>
<td><input type="checkbox" name="accesstimes[]" id="107" value="06"  />&nbsp;6AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="07"  />&nbsp;7AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="08"  />&nbsp;8AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="09"  />&nbsp;9AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="10"  />10AM</td>
</tr>
<tr>
<td><input type="checkbox" name="accesstimes[]" id="107" value="11"  />11AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="12"  />12PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="13"  />&nbsp;1PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="14"  />&nbsp;2PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="15"  />&nbsp;3PM</td>
</tr>
<tr>
<td><input type="checkbox" name="accesstimes[]" id="107" value="16"  />&nbsp;4PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="17"  />&nbsp;5PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="18"  />&nbsp;6PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="19"  />&nbsp;7PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="20"  />&nbsp;8PM</td>
</tr>
<tr>
<td><input type="checkbox" name="accesstimes[]" id="107" value="21"  />&nbsp;9PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="22"  />10PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="23"  />11PM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="00"  />12AM</td>
<td><input type="checkbox" name="accesstimes[]" id="107" value="NONE"  />NONE</td>
<td>&nbsp;</td>
</tr>
</div>
<td colspan="5">
<input type="hidden" name="id" value="107" />
<input type="submit" class="updatebutton" name="confirm" value="Update" />
</td></tr></table>
</form>
</div>

Проблема в том, что на странице имеется около 10 наборов этих блоков из-за всплывающего окна jquery, и все они находятся в div с идентификатором «check_ (idofblock)», что не является проблемой. У меня есть флажок / снять все флажки, работающие. Теперь, что я не могу понять, как я могу получить это так, когда какие-либо флажки выбраны, если я нажимаю на помеченный "NONE", то это единственный выбранный, а также если выбран NONE, как я могу снять галочку после того, как я нажму на что-нибудь еще? Я просто не могу понять это правильно. Вот мой код для «проверить / снять все», который проверяет все, кроме NONE.

    $('input[id=all]').click(function() {
            the_id = $(this).attr('name');
            $('input:checkbox[id="'+the_id+'"]').attr('checked', ($(this).is(':checked')));
            $('input:checkbox[id="'+the_id+'"][value="NONE"]').attr('checked', false);
    });

У меня нет кода для публикации того, что мне нужно, так как он ломал мне голову, поэтому я удалил его и решил, что я спрошу всех, кто умнее с jquery, чем я.

Любая помощь будет принята с благодарностью:)

Answer 1

Прежде всего, неправильно использовать один и тот же идентификатор на странице. почему вы не обманываете jquery?

вместо:

<input type="checkbox" name="accesstimes[]" id="107" value="21"  />

от

<input type="checkbox" name="accesstimes[]" element_id="107" value="21"  />

и

<input type="checkbox" name="accesstimes[]" id="107" value="NONE"  />

от

<input type="checkbox" name="accesstimes[]" element_id="107" class="NONE"  />

и в конце сделайте:

   $('#all').click(function() {
            the_id = $(this).attr('name');
            $('input:checkbox[element_id="'+the_id+'"]').prop('checked', ($(this).is(':checked')));
            $('.NONE').prop('checked', false);
    });

работает:

РЕДАКТИРОВАТЬ: я также установил флажок нет для вас;)

http://jsfiddle.net/workdreamer/LGnff/

Answer 2

не элегантное решение, но оно работает, и, как @ ridecar2 предлагает использовать идентичные идентификаторы, не является хорошей практикой / его следует избегать

$('input[id=all]').click(function() {        
  the_id = $(this).attr('name');
  $('input:checkbox[id="'+the_id+'"]').attr('checked', ($(this).is(':checked')));
  $('input:checkbox[id="'+the_id+'"][value="NONE"]').attr('checked', false);
 });

$(":checkbox").filter(function(){
  return $(this).closest("td").text()!='NONE';
  }).click(function(){
     $("td").filter(function(){
        return   $(this).text()=='NONE'}).find(":checkbox").prop("checked",false);
    });

    $("td").filter(function(){
        return $(this).text()=='NONE'}).find(":checkbox").click(function(e){
        $(":checkbox").not(this).prop("checked",false);
    });

DEMO

Answer 3

1. Доступ к элементам по идентификатору с помощью селектора идентификаторов #, а не селектора атрибутов
2. Вы не должны использовать один и тот же идентификатор для более чем одного элемента.В противном случае jQuery не сможет найти более одного элемента.
3. Ваш HTML-код недействителен.div не является допустимым дочерним элементом для table.

При этом, если пользователь нажимает на флажок с name="107", вы можете снять все флажки внутри элемента div с помощьюid check_107, как это, при условии, что вы измените с id="all" на class="checkAll"

$('.checkAll').click(function() {
    var id = $(this).attr("name");
    $('#check_' + id + ' input[type=checkbox]').removeAttr("checked");
});