jQuery Uncheck all except one when certain one checked

Question

Here is my problem...I have a page that loads a list of clients and on click of there name, a popup comes up and you can define what time they are allowed to login, here is the html code.

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

The issue is, there are about 10 sets of these blocks on the page due to the jquery popup, and they all are under a div with the id being "check_(idofblock)" which isn't a problem. I have the check/uncheck all box working. Now what i can't seem to figure out, how do i get it so when any checkboxes are selected, if I click on the one marked "NONE" then that's the only one selected as well as if NONE is selected, how do i uncheck it after i click on anything else? I just can't seem to get it right. Here is my code for the "check/uncheck all" which checks all except for 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);
    });

I don't have any code to post for what I need as it was racking my brain so I deleted it and figured i'd ask everyone here who is way smarter with jquery then I am.

Any help would be greatly appreciated :)

Answer 1

first of all it's so wrong to use the same id on the page. why don't you don't trick with jquery?

instead of:

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

by

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

and

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

by

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

and in the end do:

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

it works:

EDIT: I also implemented the checkbox none for you ;)

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

Answer 2

not an elegant solution but it works and as @ridecar2 suggested using the identical ids is not a good practice/ should be avoided

$('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. Access elements by id using the id selector # - not the attribute selector
2. You're not supposed to use the same id for more than one element. Otherwise, jQuery will not be able to find more than one element.
3. Your html is invalid. div is not a valid child element to a table.

That being said, if the user clicks a checkbox with name="107", you can uncheck all the checkboxes inside a div element with id check_107 like this, assuming you change from id="all" to class="checkAll"

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