从JSON对象获取复选框值 [英] Getting checkbox value from json object

问题描述

我目前正在学习和使用淘汰赛js框架.我有一组用于联系人的基本字段.我可以添加联系人，没有任何问题.但是我在设置性别male和female的值时遇到困难.我已经正确声明了，但是在读取JSON对象时，它不会显示任何性别值.为什么不显示联系人是男性还是女性? JSFIDDLE

I am currently learning and playing around with the use of the knockout js framework. I have a basic set of fields for contacts. I am able to add contacts without any problems. But I am having difficulties with setting the values for gender male and female. I have declared properly but when reading the JSON object it doesn’t display any values for gender. Why is it not showing if a contact is male or female? JSFIDDLE

var initialData = [{
    firstName: "Jenny",
    lastName: "LaRusso",
    phone: "[phone]",
    alt_phone: "[phone]",
    male: false,
    female: true
}, {
    firstName: "Sensei",
    lastName: "Miyagi",
    phone: "[phone]",
    alt_phone: "[phone]",
    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));

推荐答案

要在kickout.js中启用复选框，正确的语法是

To enable a checkbox in knockout.js, the correct syntax is

在HTML中将复选框声明为

Declare checkbox in HTML as

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

通过基因敲除.js启用/禁用复选框

To Enable/Disable checkbox through knockout.js

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

将javascript代码更改为

Change the javascript code to

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中，更改复选框的代码

In HTML Change the code for checkbox

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

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

这篇关于从JSON对象获取复选框值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！