Using jQuery/JS, can I “tie” together a JS object's property directly to the value of a form input element?

Question

I'm building out an online reservation system for a pet-boarding business in my city and I've hit a wall as to how to efficiently carry out this specific functionality.

Quick gist of the user process...

1. Some preliminary info is given (client info, pet info, etc etc).
2. User chooses 2 dates; the check-in and check-out days.
3. The program calculates the number of days the client is staying and each day is thrown into a constructor for class "Day". A ... block is generated for each day and displayed to the user. It also might be worth noting that all of the Day objects are stored in an array which is then contained in the mama class "ReservationData"...which besides the Day-array also holds some meta-data pertaining to the reservation itself.

Anyway, my problem is that once the 'dayBlocks' are listed & displayed to the user, the user must then be able to go and check individual "extras" that they want for their pet on that specific day.

So I've broken it down so that {ReservationData} <--(has an array of)-- {Days} <--(has an array of)-- {Extras}. There are 14 extra services to choose from, so for each day displayed there is a simple list of checkboxes and labels.

Ideally, I want it setup so that when a checkbox is checked by the user, it directly & immediately alters its corresponding variable within the reservationDataDaysExtraDeepArray accordingly. The C-programmer in me wants to tie a pointer to each checkbox, but I'm (at least I think) pretty sure that's not doable with jQuery.

Although I think I explained it pretty clearly, here's some of the code:

//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 is my first question on this site, but I did a lot of searching and am still lost...thanks guys!

Answer 1

Assuming the name of your checkboxes correspond to the keys in your dayExtras object something like this would do..

//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

Got it working, thanks for pointing me in the right direction guys!

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;
}​