jQuery在选中某个时取消选中除一个之外的所有答案

【问题标题】：jQuery Uncheck all except one when certain one checkedjQuery在选中某个时取消选中除一个之外的所有
【发布时间】：2012-01-30 14:51:25
【问题描述】：

这是我的问题...我有一个加载客户列表的页面，点击那里的名称会弹出一个弹出窗口，您可以定义允许他们登录的时间，这里是 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>

问题是，由于 jquery 弹出窗口，页面上大约有 10 组这些块，它们都位于 id 为“check_(idofblock)”的 div 下，这不是问题。我有选中/取消选中所有框工作。现在我似乎无法弄清楚，我如何得到它，所以当任何复选框被选中时，如果我点击标记为“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);
    });

我没有任何代码可以发布我需要的东西，因为它让我绞尽脑汁，所以我删除了它，并想我会问这里的每个人谁比我更聪明。

任何帮助将不胜感激:)

【问题讨论】：

ID 在页面上必须是唯一的，相关复选框需要使用 class 而不是 id。

标签： php jquery mysql html checkbox

【解决方案1】：

首先，在页面上使用相同的 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);
    });

有效：

编辑：我还为你实现了复选框 none ;)

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

【讨论】：

【解决方案2】：

不是一个优雅的解决方案，但它可以工作，正如@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”时，我首先选择的复选框现在未选中...
我现在似乎已经想通了.... 将您最后提供的代码从 "$(":checkbox").not(this).prop("checked",false );"到 $.each($(this).closest('table').find(":checkbox").not(this), function() { $(this).attr('checked', false); }) ;

【解决方案3】：

使用 id 选择器 # 按 id 访问元素 - 而不是属性选择器
您不应该为多个元素使用相同的 id。否则，jQuery 将无法找到多个元素。
您的 html 无效。 div 不是 table 的有效子元素。

话虽如此，如果用户单击带有name="107" 的复选框，您可以像这样取消选中 id 为 check_107 的 div 元素内的所有复选框，假设您从 id="all" 更改为 class="checkAll"

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

【讨论】：