從json對象獲取複選框值

我目前在學習和使用knockout js框架。我有一組基本的聯繫人字段。我可以添加沒有任何問題的聯繫人。但我在設置性別male和female的值時遇到困難。我已經正確聲明，但在閱讀JSON對象時，它不顯示任何性別值。爲什麼不顯示聯繫人是男性還是女性？ JSFIDDLE 從json對象獲取複選框值

var initialData = [{ 
    firstName: "Jenny", 
    lastName: "LaRusso", 
    phone: "(555) 121-2121", 
    alt_phone: "(555) 123-4567", 
    male: false, 
    female: true 
}, { 
    firstName: "Sensei", 
    lastName: "Miyagi", 
    phone: "(555) 444-2222", 
    alt_phone: "(555) 999-1212", 
    male: true, 
    female: false 
}]; 

var ContactsModel = function (contacts) { 
    var self = this; 
    self.contacts = ko.observableArray([]); 

    ko.utils.arrayForEach(contacts, function (contact) { 
     self.contacts.push({ 
      firstName: contact.firstName, 
      lastName: contact.lastName, 
      phone: contact.phone, 
      alt_phone: contact.alt_phone, 
      male: contact.male, 
      female: contact.female 
     }); 
    }); 

    self.addContact = function() { 
     self.contacts.push({ 
      firstName: "", 
      lastName: "", 
      phone: "", 
      alt_phone: "", 
      male: false, 
      female: false 
     }); 
    }; 

    self.removeContact = function (contact) { 
     self.contacts.remove(contact); 
    }; 

    self.addPhone = function (contact) { 
     contact.phones.push({ 
      number: "" 
     }); 
    }; 

    self.removePhone = function (phone) { 
     $.each(self.contacts(), function() { 
      this.phones.remove(phone) 
     }) 
    }; 

    self.save = function() { 
     self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2)); 
    }; 

    self.lastSavedJson = ko.observable("") 
}; 

ko.applyBindings(new ContactsModel(initialData));

來源

2014-02-27 Code_Ed_Student

我認爲性別選擇，你應該使用單選按鈕不復選框。通過單選按鈕，您還可以收音一個額外的字段。 – Akhlesh

要啓用knockout.js複選框，正確的語法是在HTML

申報復選框作爲

<input type='checkbox' data-bind="checked: bindName" />

啓用通過knockout.js /禁用複選框

<script type="text/javascript"> 
var viewModel = { 
    bindName : ko.observable(false), 
}; 
</script>

將javascript代碼更改爲

ko.utils.arrayForEach(contacts, function (contact) { 
    self.contacts.push({ 
     firstName: contact.firstName, 
     lastName: contact.lastName, 
     phone: contact.phone, 
     alt_phone: contact.alt_phone, 
     male: ko.observable(contact.male), /* Line Modified */ 
     female: ko.observable(contact.female) /* Line Modified */ 
    });

在HTML更改代碼複選框

Male <input type="checkbox" data-bind='checked: male' /> 
Female <input type="checkbox" data-bind='checked: female' />

JS小提琴鏈接 - http://jsfiddle.net/dLbY7/15/

來源

2014-02-27 06:45:23

這工作完美。如果我想爲男性設立一個子檢查框，您會有什麼建議？例如點擊男性複選框，然後顯示一個複選框，指出「年齡範圍20-30」 –

從json對象獲取複選框值

回答

相關問題