使用jQuery / JS，我可以将JS对象的属性直接“绑定”到表单输入元素的值吗？

Question

我正在为我所在城市的宠物寄宿企业建立在线预订系统，并且在如何有效执行此特定功能方面遇到了障碍。

快速了解用户流程...

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

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

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

理想情况下，我希望对其进行设置，以便当用户选中一个复选框时，它会直接并立即相应地更改ReservationDataDaysExtraDeepArray中的相应变量。 我内部的C程序员想将一个指针绑定到每个复选框，但是我（至少我认为）非常确定这对于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);
});

Answer 2

一切正常，感谢您为我指出正确的方向！

function saveExtra(me) {
    var extraName = me.attr('name');
    var extraVal = me.val();
    (reservationData[extraName]).dayExtras[extraVal] = me.prop('checked');
    for (key in reservationData) {
        (reservationData[key]).dump(); //Day data-dump method.
    }
}

this.generateExtrasGrid = function() {
    var fieldName = "day" + this.dayNum + "";
    var exGrid = "";
    exGrid += "<form class='extrasGrid' id='" + this.dayNum + "'>";
    exGrid += "<input type='checkbox' class='extra' name='" + fieldName + "' value='YH' onclick='saveExtra($(this))' />";............
    exGrid += "</form>";
    return exGrid;
}​