Question

这是我的问题...我有一个加载客户列表的页面，点击该名称后会出现一个弹出窗口，您可以定义允许登录的时间，这里是html代码。< / p>

<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，我该怎么办点击其他内容后取消选中它？我似乎无法做对。这是我的“check / uncheck all”代码，它检查除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

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

Answer 2

使用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");
});

Answer 3

不是一个优雅的解决方案，但它的工作原理和@ 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

jQuery取消选中除特定一个之外的所有内容

3 个答案: