模块化 JS：单击复选框 => 启用单选按钮以获取更多选项 - 使用模块化 js 执行此操作的正确方法是什么？

Question

这是我当前的代码： https://jsfiddle.net/7fL6ocs9/1/

我有 3 列单选按钮，只能通过单击它们上方的复选框来启用。

使用模块化 js 执行此操作的正确方法是什么？

在我的"cacheDom"方法中分别选择每个复选框？这不是让它不那么模块化吗？

/******************/
/** Set Schedule **/
/******************/
(function() {
  var schedule = {
    report: [],
    template: $('#report_schedule').html(),
    // Init functions
    init: function() {
      this.cacheDom();
      this.bindEvents();
    },
    // Cache elements from DOM
    cacheDom: function() {
      this.$setScheduleBtn = $('#setScheduleBtn');
      this.$reportSchedule = $('#reportSchedule');
      this.$checkBoxes = $('fieldset > input[type="checkbox"]');
      console.log(this.$checkBoxes);
    },
    // Set events
    bindEvents: function() {
      this.$setScheduleBtn.click(this.showReportScheduler.bind(this));
    },
    // Display on click
    showReportScheduler: function() {
      this.$reportSchedule.slideToggle("fast");
    }
  };
  schedule.init();
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<span class="btn" id="setScheduleBtn">Set Schedule</span>
<div id="reportSchedule" name="reportSchedule" style="">
  <fieldset class="report-type" style="width:32%; display: inline-block;">
    <legend>
      <input type="checkbox" name="weekly" id="weekly">
      <label for="weekly">Weekly:</label>
    </legend>
    <input type="radio" id="week" name="week" checked="checked" disabled>
    <label for="week">3 Months</label>
  </fieldset>
  <fieldset class="report-type" style="width:32%; display: inline-block;">
    <legend>
      <input type="checkbox" name="monthly" id="monthly">
      <label for="monthly">Monthly:</label>
    </legend>
    <input type="radio" id="monthly1" name="monr" disabled>
    <label for="monthly1">1 Month</label>
    <input type="radio" id="monthly3" name="monr" disabled>
    <label for="monthly3">3 Months</label>
    <input type="radio" id="monthly6" name="monr" disabled>
    <label for="monthly6">6 Months</label>
  </fieldset>
  <fieldset class="report-type" style="width:32%; display: inline-block;">
    <legend>
      <input type="checkbox" name="quarterly" id="quarterly">
      <label for="quarterly">Quarterly:</label>
    </legend>
    <input type="radio" id="quarterly3" name="quar" disabled>
    <label for="quarterly3">3 Months</label>
    <input type="radio" id="quarterly6" name="quar" disabled>
    <label for="quarterly6">6 Months</label>
    <input type="radio" id="quarterly12" name="quar" disabled>
    <label for="quarterly12">12 Months</label>
  </fieldset>
</div>

Answer 1

这是我对此类任务的完整解决方案：

模块化JS：3个部分(复选框和无线电(上的全局功能&Sholud 我在代码中应用"渲染"？

我使用了一个渲染函数，每当主数组变量发生任何变化时都会触发。 希望这对那里的任何人都有帮助。