jQuery取消选中某个选项，除了一个选中某个选项

问题描述：

这是我的问题...我有一个加载客户端列表的页面，单击该名称后会出现一个弹出窗口，您可以定义允许哪些时间登录，这里是html代码。jQuery取消选中某个选项，除了一个选中某个选项

<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下与ID为“check_（idofblock）”，这是不是一个问题。我有检查/取消全选框的工作。现在，我似乎无法弄清楚，我如何得到它，所以当任何复选框被选中，如果我点击标有“无”的那一个，那么这是唯一一个选定以及如果选择无，我如何在点击其他任何东西后取消选中它？我似乎无法做到。这里是我的“检查/取消全部选中”的代码，除了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的方式更聪明那么我。

任何帮助将大大ID使用id选择#赞赏:)

ID在页面上必须是唯一的，您需要使用class而不是id作为相关复选框。 – ridecar2 2011-12-30 14:39:01

答

不是一个完美的解决方案，但它的工作原理和@ ridecar2建议使用相同的ID不是一个好习惯/应该避免

$('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

这个很棒！只有一个问题，当我在一个检查块中选择一堆复选框时，然后在另一个块中单击“NONE”，我首先选中的复选框现在不被选中... – user1123045 2011-12-30 16:31:43

我似乎已经想通了out（now）....将你在末尾提供的代码从“$（”：checkbox“）中更改为不是（this）.prop（”checked“，false）;”到$ .each（$（this）.closest（'table'）。find（“：checkbox”）。not（this），function（）{ $（this）.attr（'checked'，false）; }）; – user1123045 2011-12-30 16:52:33

答

访问元素 - 而不是属性选择
你不应该使用相同ID的多个元素。否则，jQuery将无法找到多个元素。
你的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"); 
});

答

第一在页面上使用相同的ID是非常错误的。你为什么不不用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/

jQuery取消选中某个选项，除了一个选中某个选项

相关推荐