javascript - 如何在将(缓存变量)存储在新变量中后通过 id 选择复选框元素？

Question

在 cacheDom 中，我保存了所有复选框。

我想渲染 this.weekly、this.monthly 和 this.quarterly 变量中的数据集并选中复选框集在我的html中。

HTML:

<fieldset class="report-type" style="width:26%; display: inline-block;">
    <legend>
        <label for="weekly">Weekly:</label>
    </legend>

    <input type="checkbox" id="w1" name="week" value="1">
    <label for="w1">1 Months</label>

    <input type="checkbox" id="w3" name="week" value="3">
    <label for="w3">3 Months</label>

</fieldset> 

<fieldset class="report-type" style="width:26%; display: inline-block;">
    <legend>
        <label for="monthly">Monthly:</label>
    </legend>

    <input type="checkbox" name="mont" value="1" id="m1">
    <label for="m1">1 Month</label>

    <input type="checkbox" name="mont" value="3" id="m3">
    <label for="m3">3 Months</label>

    <input type="checkbox" name="mont" value="6" id="m6">
    <label for="m6">6 Months</label>

</fieldset>     

<fieldset class="report-type" style="width:26%; display: inline-block;">
    <legend>            
        <label for="quarterly">Quarterly:</label>
    </legend>

    <input type="checkbox" name="quar" value="3" id="q3">
    <label for="q3">3 Months</label>

    <input type="checkbox" name="quar" value="6" id="q6">
    <label for="q6">6 Months</label>

    <input type="checkbox" name="quar" value="12" id="q12">
    <label for="q12">12 Months</label>

</fieldset>

这是我的代码部分:

var 时间表 = {

// get reports via php
weekly: [0, 3],
monthly: [1, 6],
quarterly: [3, 6, 12],

/******************/
/* Init functions */
/******************/

init: function() {
    this.cacheDom();
    this.bindEvents();
    this.render();
}, 
// Cache elements from DOM
cacheDom: function() {
    this.cachedWeekly    = this.weekly.slice();
    this.cachedMonthly   = this.monthly.slice();
    this.cachedQuarterly = this.quarterly.slice();

    this.$setScheduleBtn = $('#setScheduleBtn'); 
    this.$reportSchedule = $('#reportSchedule');
    this.$allFieldsets   = this.$reportSchedule.find('fieldset');
    this.$checkboxBtns   = this.$allFieldsets.find('input[type="checkbox"]');
    this.$saveBtn        = this.$reportSchedule.find('#saveSchedule');
}, 
// Set events
bindEvents: function() {

    var that = this;

    // Show/Hide "Set report" section
    this.$setScheduleBtn.click(this.showReportScheduler.bind(this));

    // Save button apply changes 
    this.$saveBtn.click(this.saveSchedule.bind(this));

}, 
// Renderng data
render: function() {

    var that = this;

    var value = 0;

    for (value of that.weekly) {
        // console.log(this.$checkboxBtns.find('#w'+value));
        // console.log("----"); 
        this.$checkboxBtns.find('#w' + value).attr('checked', true);
    }

    for (value of that.monthly) {
        // console.log(this.$checkboxBtns.find('#m'+value));
        // console.log("----"); 
        this.$checkboxBtns.find('#m' + value).attr('checked', true);
    }

    for (value of that.quarterly) {
        // console.log(this.$checkboxBtns.find('#q'+value));
        // console.log("----"); 
        this.$checkboxBtns.find('#q' + value).attr('checked', true);
        console.log(this.$checkboxBtns.find('#q' + value).attr('checked', true));
    }

}, 

我不明白为什么我的代码中没有得到任何检查，并且实际上不确定它是否选择了元素(具有指定的 id)。

使用jquery 1.3.2(这就是为什么我使用attr而不是prop)

Answer 1

您需要使用.filter()其中选择集合中的匹配元素而不是 .find()从其后代中选择元素来定位复选框

this.$checkboxBtns.filter('#w' + value).attr('checked', true);