javascript - 集合检查框 = 集合检查框

Question

如果用户选中或取消选中:comfilled日，我们如何自动将send_email的collection_check_boxes与当前选中或未选中的内容进行匹配在:已提交 collection_check_boxes？

例如，如果用户在已提交中选中“sun”并取消选中“fri”，那么这些更改也将反射(reflect)在:send_email中。

但反之则不然。

例如，如果用户更改 send_email 的选中日期，则任何 JavaScript 都不应生效。 :commited 只能在直接联系时更改。

<%= 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 friend 们!

Answer 1

假设每个复选框集合都具有相同的值(星期一和星期一)，您可以将每个复选框集合分组到一个 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>

仅监听来自 .comfilled-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>