Question

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

目前我正在使用ID和标签，但这仅适用于唯一的ID。

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

我目前的想法是使用与un / check所有类型按钮相同的代码片段，而是使用一类Coriander而不是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);
    });
});

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

更简单的选择就是使用特定于成分的类，大大缩短代码。在改变任何东西时，这样做的缺点是更多的工作，因为你必须保持类的一致性。

这可能看起来像这样：

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

当我选中一个复选框时，我想要勾选另一个类似的复选框

1 个答案: