checked: <binding-value>
此绑定用于在可检查表单元素和ViewModel属性之间创建链接。 这些表单元素主要包括复选框和单选按钮。 这也是一种双向绑定方法，其中在用户检查表单控件的那一刻，相应的ViewModel属性被改变，反之亦然。
语法 (Syntax)
checked: <binding-value>
参数 (Parameters)
主要参数
可检查元素的状态设置为参数值。 之前的价值将被覆盖。
Checkbox - 当ViewModel参数值为true时检查DOM元素，如果为false则取消选中。 非零数字，非空字符串和非空对象在true布尔值处解释，而未定义，零和空字符串被视为false值。
Radio Buttons - 单选按钮以String格式的形式工作。 意思是，只有当参数值与Radio Button节点的值完全匹配时，KnockoutJS才会设置元素值。 用户选择新的单选按钮值时，该属性将设置为新值。
如果参数是可观察的，则在更改基础observable时，将检查或取消选中元素值。 如果没有使用可观察的元素，则仅处理一次元素。
附加参数
checkedValue - checkedValue选项用于保存checkedbinding使用的值而不是element的value属性。 当checked值不是String（如Integer或object）时，这非常有用。
例如，当选中相应的复选框时，请查看以下代码片段，其中item对象本身包含在selectedValue数组中。
<!-- ko foreach: items -->
<input type = "checkbox" data-bind = "checkedValue: $data,
checked: $root.chosenValue" />
<span data-bind = "text: itemName"></span>
<!-- /ko -->
<script type = "text/javascript">
var viewModel = {
itemsToBeSeen: ko.observableArray ([
{ itemName: 'Item Number One' },
{ itemName: 'Item Number Two' }
]),
chosenValue: ko.observableArray()
};
</script>
如果checkedValue参数是Observable值，则绑定将在基础值更改时更新已检查的模型属性。 对于单选按钮，KO将只更新模型值。 对于复选框，它将使用新值替换旧值。
例子 (Example)
让我们看看下面的示例，该示例演示了复选框控件的使用。
<!DOCTYPE html>
<head>
<title>KnockoutJS Checked checkbox Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p> The required files are installed.
Please check below to complete installation</p>
<p><input type = "checkbox" data-bind = "checked: agreeFlag" />
I agree to all terms and conditions applied.</p>
<button data-bind = "enable: agreeFlag">Finish</button>
<script type = "text/javascript">
function ViewModel() {
this.agreeFlag = ko.observable(false) // Initially unchecked
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在checked-checkbox-bind.htm文件中。
在浏览器中打开此HTML文件。
仅当用户同意条款和条件时，才会激活“完成”按钮。
例子 (Example)
让我们看下面演示使用单选按钮控制的例子 -
<!DOCTYPE html>
<head>
<title>KnockoutJS Checked Radio Button Binding</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<p> Select gender type from below:</p>
<div><input type = "radio" name = "gender" value = "Male"
data-bind = "checked: checkGender" /> Male</div>
<div><input type = "radio" name = "gender" value = "Female"
data-bind = "checked: checkGender" /> Female</div>
<div><p>You have selected: <span
data-bind = "text:checkGender "></span></p></div>
<script type = "text/javascript">
function ViewModel () {
checkGender = ko.observable("Male") // Initially male is selected
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤来查看上述代码的工作原理 -
将以上代码保存在checked-radio-button-bind.htm文件中。
在浏览器中打开此HTML文件。
单选按钮包含性别类型值。