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

Question

我想在我当前的项目中添加一个功能，使用户只需选中具有相同内容的复选框一次。在我的情况下，我有一个食谱页面，其中包含每个食谱的成分复选框，以便在购物时使用，我希望拥有它，以便当用户选中一个食谱中的复选框“Coriander”时，它还会检查任何其他 Coriander 复选框任何其他食谱。

目前我正在使用 ID 和标签，但这显然只适用于唯一 ID。

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

我目前的想法是使用与 un/check all type 按钮相同的 sn-p 代码，而是使用 Coriander 类而不是 id 但不确定这是否可行，或者它是否是最优雅的方式。

任何其他想法表示赞赏！

Answer 1

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

$("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'));
});