Question

好的，考虑一下这个问题。我有一个电子邮件地址列表，每个电子邮件地址都有一个复选框，标记它们是否有效。好的，因此用户可以手动检查/取消选中每个电子邮件地址，也可以单击选择或取消选中所有复选框的按钮。

但是，我的问题是，当用户点击选择/取消选中所有复选框的按钮时，程序如何知道所有复选框的状态是什么？我的意思是：

if (all checkboxes are checked)
{  uncheck all}
else
{ check all }

我不能只是去取第一行的值，因为： 1.用户可能已手动选中/取消选中它 2.该ID可能不再出现在数据库中。

请帮帮我。

Answer 1

我认为你正在以错误的方式看待这个问题。我建议有一个复选框作为你的切换（如网站/应用程序那样）。然后，复选框的状态取决于是否选中了所有其他复选框。

你可以用变量/标志来做，但这看起来很直观。这是一个例子 - 代码有点匆忙：）

http://jsbin.com/uyapi4

Answer 2

只需查看第一行，然后将相反的状态应用于所有复选框。

如果数据库中不再存在ID，则这是您使用服务器端代码处理的单独问题，可以忽略它，也可以将验证错误反馈给用户。

Answer 3

不完全确定您是在询问用户体验问题还是技术问题。所以我会回答两个问题。： - ）

从用户体验的角度来看，FWIW（这可能是偏离主题的），通常使用“全部”按钮在“全部”和“无”之间切换，这是我使用的状态图：

所有人都被检查=＆gt;取消选中所有
无人检查=＆gt;全部检查
一些被检查=＆gt;全部检查

如果你这样做，这很容易：

var cbs;

cbs = $(container).find('input[type=checkbox]');
cbs.attr('checked', cbs.not(':checked').length > 0);

Live example

...假设所有这些复选框都在某种容器中（例如，表单中的表单或某些div等）。

如果你想做别的事情，你仍然可以让jQuery为你计算检查的数量：

var cb, total, checked;
cb = $(container).find('input[type=checkbox]');
total = cb.length;
checked = cb.filter(':checked');
if (checked == total) {
    // They're all checked
}

Answer 4

这是措辞的方式，这使我认为这是一个可用性问题而不是编程问题。看一下gmail和用于切换选定电子邮件的ui。列表顶部基本上有一个检查框，如果检查了电子邮件，则会检查灰色框。如果单击它然后切换所有未选中的内容并切换到未选中的状态。如果再次单击它会选择全部。我认为这个UI效果很好。

Answer 5

不确定它是否正在寻找，希望它有所帮助。

// Will select all checkbox input not checked, and checked them.
$(".checkbox-class:not(:checked)").attr('checked', true);

未经测试。

Answer 6

您可以使用此假设您拥有名为email[]

的所有复选框

将其添加到页面的头部或您拥有的脚本文件中：

<script type="text/javascript">
function checkAll()
{
    checkBoxes = document.getElementsByName('email[]')
    for(i=0;i<checkBoxes.length;i++)
        if(!checkBoxes[i].checked)
            checkBoxes[i].checked = true
}

function uncheckAll()
{
    checkBoxes = document.getElementsByName('email[]')
    for(i=0;i<checkBoxes.length;i++)
        if(checkBoxes[i].checked)
            checkBoxes[i].checked = false
}
</script>

这是在页面正文中：

<a href="javascript:checkAll()">Check All</a> || <a href="javascript:uncheckAll()">Uncheck All</a>

或将其添加为按钮，但不要t forget to use“javascript：checkAll（）”and“javascript：uncheckAll（）”`

Answer 7

或将状态存储在变量中并执行类似的操作？： http://www.jsfiddle.net/EQuvq/12/

Answer 8

听起来你想要两个独立的事件：全选并取消全选。处理此问题最直接的方法是使用两个单独的按钮（或下拉菜单中的选项，无论如何）。

在这种情况下，你需要类似的东西（在JavaScript中使用jQuery）：

function selectAll() {
    $(":checkbox").attr("checked", true);
}

function deselectAll() {
    $(":checkbox").removeAttr("checked");
}

在当前的HTML规范中，“checked”属性没有值，但是。如果您对此不确定，可以随时使用.attr("checked", true)。

另一方面，如果您正在寻找切换每个复选框状态的功能，那么......

function toggleChecked() {
    $(":checked").each(function() {
        var checkedState = $(this).attr("checked");
        $(this).attr("checked", !checkedState);
    });
}

最后，如果你正在寻找一个为所有复选框分配一个选中状态的函数，那么......

function setChecked(state) {
    $(":checked").attr("checked", state);
}

未知复选框问题

8 个答案: