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

Question

我想在我当前的项目中添加一项功能，使用户只需选中具有相同内容的复选框一次。就我而言，我有一个食谱页面，其中包含购物时要使用的每个食谱的配料复选框，我希望拥有它，以便当用户选中一个食谱中的复选框 "Coriander" 时，它还会检查任何其他香菜任何其他食谱中的复选框。

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

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

我目前的想法是使用与 un/check 所有类型按钮相同的代码片段，而是使用 class 香菜而不是 id 但不确定是否可行或是否可行是最优雅的方式。

任何其他想法表示赞赏！

Answer 1

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

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

这样您就可以使用标签中给出的成分。

一个更简单的选择是使用 ingredient-specific 类，大大缩短代码。这样做的缺点是更改任何内容时需要更多工作，因为您必须保持类一致。

这可能看起来像这样：

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

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

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

html

javascript

checkbox

jquery

label