javascript - 使用 jQuery/JS，我可以将 "tie"和一个 JS 对象的属性一起直接赋给表单输入元素的值吗？

Question

我正在为我所在城市的一家宠物寄宿企业构建一个在线预订系统，但我在如何有效地执行此特定功能方面遇到了瓶颈。

用户进程的快速要点...

1. 给出了一些初步信息(客户信息、宠物信息等)。
2. 用户选择 2 个日期；入住和退房日期。
3. 该程序计算客户停留的天数，并将每一天都放入“Day”类的构造函数中。每天生成一个 block 并显示给用户。还可能值得注意的是，所有 Day 对象都存储在一个数组中，然后该数组包含在 mama 类“ReservationData”中......除了 Day 数组之外，它还包含一些与预订本身有关的元数据。

无论如何，我的问题是，一旦“dayBlocks”被列出并显示给用户，用户就必须能够去检查他们想要在特定日期为他们的宠物提供的个人“额外服务”。

所以我将其分解为 {ReservationData} <--(有一个数组)-- {Days} <--(有一个数组)-- {Extras}。有 14 项额外服务可供选择，因此对于显示的每一天，都有一个简单的复选框和标签列表。

理想情况下，我希望设置它以便当用户选中复选框时，它会直接并立即相应地更改 reservationDataDaysExtraDeepArray 中的相应变量。我的 C 程序员想要将指针绑定(bind)到每个复选框，但我(至少我认为)非常确定这在 jQuery 中是行不通的。

虽然我认为我已经解释得很清楚了，但这里是一些代码:

//Day Object/Class
function day(_date, _daynum) {
    this.date = new Date(_date);
    this.dayNum = _daynum;
    this.dayExtras = {
        'YH': false,  //<--- How can I directly manipulate
        'PP': false,  //<--- all of these guys via user-control
        'EE': false,  //<--- of corresponding/assigned 
        'ST': false,  //<--- checkboxes?
        'PT': false,
        'TT15': false,
        'TT30': false,
        'TT45': false,
        'DC': false   //--- Or can I? :/        
    };

    console.log("Day object created with date of " + day.date + " and day-number of " + day.dayNum + ".");

    this.getDayNum = function() { return this.dayNum; }
    this.getDayDate = function() { return this.date; }
}

这是我在这个网站上的第一个问题，但我做了很多搜索，但仍然迷路了......谢谢你们!

Answer 1

假设您的复选框的名称对应于您的 dayExtras 对象中的键，这样的事情会做..

//Day Object/Class
function day(_date, _daynum) {
    this.date = new Date(_date);
    this.dayNum = _daynum;
    this.dayExtras = {
        'YH': false,  //<--- How can I directly manipulate
        'PP': false,  //<--- all of these guys via user-control
        'EE': false,  //<--- of corresponding/assigned 
        'ST': false,  //<--- checkboxes?
        'PT': false,
        'TT15': false,
        'TT30': false,
        'TT45': false,
        'DC': false   //--- Or can I? :/        
    };

    console.log("Day object created with date of " + day.date + " and day-number of "+day.dayNum+".");

    this.getDayNum = function() { return this.dayNum; }
    this.getDayDate = function() { return this.date; }
    this.setDayExtras = function (key,val) {
      if(key in this.dayExtras){
        this.dayExtras[key] = val;
      }
    }
}

var myDay = new day(null,null);

$(document).on('change','#myForm input[type="checkbox"]', function () {
  myDay.setDayExtras(this.name,this.checked);
});