javascript - 模块化JS:Onclick复选框=>启用单选按钮以获取更多选项-使用模块化JS的正确方法是什么？

这是我当前的代码：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>

最佳答案

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

Modular JS: global functionality on 3 sections (checkboxes and radios) & Sholud I apply "rendering" in my code?

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

关于javascript - 模块化JS:Onclick复选框=>启用单选按钮以获取更多选项-使用模块化JS的正确方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48138106/