Jquery - 问题切换复选框[重复]

Posted 2023-03-05

【中文标题】Jquery - 问题切换复选框[重复]

【英文标题】：Jquery - issue toggling checkboxes [duplicate]

【发布时间】：2017-08-04 22:30:45

【问题描述】：

我正在使用以下代码，它确实切换了我的复选框，但不正确。

如果复选框已手动设置为选中，则会出现问题。

当您运行代码时，它会选中这些框，但当您再次单击它时，它只会取消选中之前未选中的那些。

$(".all").click(function(e) 
    var checked = !$(this).data('checked');
    $('.trigger').attr('checked', checked);
    $(this).data('checked', checked);
);

我使用 input type='image' 作为我的元素来运行检查。

<input type="image" class="all" title="All" src="toggle.png"/>

我尝试过使用以下方法，但是当它运行时，它会取消选中复选框，然后删除我用来调用它的图像。

$('.all').toggle(function()
    $('input:checkbox').attr('checked','checked');

,function()
    $('input:checkbox').removeAttr('checked');
)

谁能告诉我如何正确地做到这一点。

谢谢

【问题讨论】：

请在您的问题中发布minimal reproducible example。使用 <> 图标将 stacksn-p 直接添加到问题中，以便我们可以观察您所描述的行为

对复选框使用:checked，而不是自定义数据值。或在.all 代码中设置/取消设置您的数据值。

复制代码jsfiddle.net/7sm17x1k的示例

感谢这个例子有意义，我现在开始工作了。

【参考方案1】：

如果你想切换，你必须根据'checked'属性进行选择：

    $('.all').click(function()

    var checked = $('input:checkbox').not(':checked');
    $('input:checkbox:checked').removeAttr('checked');
    checked.attr('checked','checked');
  );

我对“仅取消选中以前未选中的那些”有点困惑——你的意思是，未选中的不能取消选中。

这是一个有效的小提琴：https://jsfiddle.net/4ckjwv8b/

顺便说一句。如果您只想始终选择一个选项，则可以使用输入类型“radio”。

【讨论】：

这似乎对我不起作用。当我使用切换时，它会隐藏我用来触发切换的图像。

我已经更新了我的答案，使用点击而不是切换，并且“选中”需要存储在一个变量中，否则它将在下一行取消选中，它将被选中。