当我选中一个复选框时，我希望选中另一个类似的复选框

When I check one checkbox, I want another similar checkbox to be ticked

本文关键字：复选框 我希望 另一个 一个      更新时间：2023-09-26

我想在我的当前项目中添加一个功能，使用户只需选中一次具有相同内容的复选框。在我的情况下，我有一个食谱页面，上面有每个食谱的配料复选框，供购物时使用，我希望有它，这样当用户在一个食谱中选中复选框"香菜"时，它也会在任何其他食谱中选中任何其他香菜复选框。

目前我正在处理id和标签，但这显然只适用于唯一的id。

    <input type="checkbox" id="checkbox2"><label for="checkbox2"> Coriander</label> <br>

我目前的想法是使用与取消/检查所有类型按钮相同的代码片段，但使用一类Coriander而不是id，但不确定这是否有效，或者这是否是最优雅的方式。

任何其他想法都很感激！

使用成分名称：首先通过其for-属性找到与单击的复选框相对应的标签。通过它的文本内容，您可以找到具有给定内容的所有其他标签。然后遍历所有这些标签，通过它们的id-属性找到相应的复选框，并将它们设置为checked。

$("body").on('click', "input:checkbox", function(ev, ui){
    var chkid = $(this).attr('id');
    var chklb = $("label[for='" + chkid + "']").text();
    $.each($("body").find("label:contains('" + chklb + "')"), function(i, v){
        $("#" + $(v).attr('for')).prop('checked', true);
    });
});

通过这种方式，您可以使用标签中给出的成分。

一个更简单的选择是只使用特定成分的类，大大缩短代码。这样做的缺点是在更改任何内容时都需要更多的工作，因为必须保持类的一致性。

这可能看起来像：

<input type="checkbox" id="checkbox2" class="coriander"><label for="checkbox2"> Coriander</label>
<input type="checkbox" id="checkbox3" class="coriander"><label for="checkbox3"> More coriander</label>

以及相应的JQuery部分：

$("body").on('click', "input:checkbox", function(ev, ui){
    $("." + $(this).attr('class')).prop('checked', $(this).prop('checked'));
});
相关文章：