javascript - collection_check_boxes = collection_check_boxes

如果用户选中或取消选中:committed日，我们如何自动将send_email的collection_check_boxes与:committed collection_check_boxes中当前选中或未选中的内容匹配？

例如，如果用户在committed中选中“ sun”并取消选中“ fri”，则这些更改也将反映在:send_email中。



但反之亦然。

例如，如果用户更改了send_email的选中日期，则没有JavaScript会生效。 :committed仅应在直接联系后更改。

<%= f.collection_check_boxes :committed, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %>

<%= f.collection_check_boxes :send_email, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %>

<script>
</script>

谢谢javascript朋友！

最佳答案

假设每个复选框集合具有相同的值（星期一和星期一），则可以将每个复选框集合分组为一个div。

<div class="committed-check-boxes">
  <%= f.collection_check_boxes :committed, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %>
</div>

<div class="send-email-check-boxes">
  <%= f.collection_check_boxes :send_email, Date::ABBR_DAYNAMES, :downcase, :to_s, checked: ["mon", "tue", "wed", "thu", "fri"] %>
</div>

仅监听.committed-check-boxes div中的点击。在.send-email-check-boxes中找到匹配的复选框，然后使用prop将checked设置为true / false。

<script>
  $('.committed-check-boxes input[type="checkbox"]').on('click', function() {
    var checkbox = $(this);

    $('.send-email-check-boxes')
      .find('input[value="' + checkbox.val() + '"]')
      .prop('checked', checkbox.prop('checked'));
  });
</script>