如何在新变量中存储(缓存变量)之后按ID选择复选框元素?

时间:2018-01-18 14:06:07

标签: javascript jquery

this.weekly我保存了所有复选框。

我想在this.monthlythis.quarterly<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> 变量中呈现数据集,并选中我的html中设置的复选框。

HTML:

// 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));
    }

}, 

这是我的代码部分:

var schedule = {

attr

我无法弄清楚为什么我的代码中没有得到任何检查,实际上也不确定它是否选择了元素(带有所声明的ID)。

使用jquery 1.3.2(这就是我使用prop代替 tinymce.init({ selector: '.editor', inline: false, toolbar: 'bold,italic,underline,|,cut,copy,paste,|,undo,redo,|,justifyleft,justifycenter,justifyright|,tiny_mce_wiris_formulaEditor,tiny_mce_wiris_formulaEditorChemistry,|,image,table,charmap,|,fullscreen, code,|,alignleft aligncenter alignright alignjustify', a_plugin_option: false, menubar: false, height: 216, branding: false, plugins: "table link image code fullscreen charmap", a_configuration_option: 400, autosave_interval: "20s", external_plugins: { 'tiny_mce_wiris': 'https://www.wiris.net/demo/plugins/tiny_mce/plugin.js' }, images_upload_url: '/upload' }); 的原因)

1 个答案:

答案 0 :(得分:1)

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

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