標籤選和單選淘汰賽

在HTML中，當我們點擊的文本或將鼠標懸停在單選按鈕或複選框的文本，我們能夠使用HTML，將其選中，如下圖所示：標籤選和單選淘汰賽

<label> 
<input type="checkbox" />option 1 
</label>

<input id="checkboxid" type="checkbox" /> 
<label for="checkboxid">option 1</label>

我設法和淘汰賽相同的行爲，但無法找到在同一太大的幫助：

<label data-bind="text: $data.optiontext"> 
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" /> 
</label>

觀（或HTML）低於（請注意下面的代碼不包含上述HTML，所以當你嘗試它，你將需要做出上述改變，並檢查它）：

<div data-bind="foreach: options"> 
    <input type="checkbox" data-bind="value: $data.optionvalue, checked: $parent.selectedOptions" /> 
    <label data-bind="text: $data.optiontext"></label> 
</div> 

<hr /> 

<div data-bind="text: selectedOptionsList"></div>

這裏是視圖型號：

var viewModel = { 
    options: [ 
       { optiontext: 'Simple', optionvalue: "1" }, 
       { optiontext: 'Advanced', optionvalue: "2" } 
      ], 
    selectedOptions: ko.observableArray(["2"]) 
}; 

viewModel.selectedOptionsList = ko.computed(function() { 
    return this.selectedOptions().join(","); 
}, viewModel); 

ko.applyBindings(viewModel);

這裏是的jsfiddle鏈接：http://jsfiddle.net/rupesh_kokal/AFzbY/

來源

2012-12-01 Rups

您可以使用一個額外的span文本實現版本1：

<label> 
    <input type="checkbox" data-bind="value: $data.optionvalue, 
      checked: $parent.selectedOptions" /> 
    <span data-bind="text: $data.optiontext"/> 
</label>

Demo fiddle.

還是2版本使用attr binding設置id和for屬性：

<input type="checkbox" data-bind="value: $data.optionvalue, 
     checked: $parent.selectedOptions, attr: { id: optiontext}" />  
<label data-bind="text: $data.optiontext, attr: {for: optiontext}" />

Demo fiddle

來源

2012-12-01 15:21:37 nemesv

謝謝nemesv。第一種選擇最適合我的任務。第二個版本在我的情況下不起作用，因爲我有各種複選框控件，它們是動態創建的，並且需要有一些動態的方法來爲同一個ID分配唯一的ID。有沒有什麼辦法可以通過淘汰賽來實現這一點，比如創建一個獨特的id，淘汰賽內部負責分配？ – Rups

沒有什麼內置於淘汰賽，這將負責生成和分配獨特的ID。所以你需要自己實現這一點：一些有關ID創建問題http://stackoverflow.com/questions/3231459/create-unique-id-with-javascript，http://stackoverflow.com/questions/105034/how- to-create-a-guid-uuid-in-javascript – nemesv

感謝nemesv，會考慮它。 – Rups

呦甚至可以綁定放棄額外的跨度通過使用Knockouts註釋綁定語法：

<label> 
<input type="checkbox" data-bind="value: $data.optionvalue, 
     checked: $parent.selectedOptions" /> 
<!-- ko text: $data.optiontext --><!-- /ko --></label>

這將防止複選框和跨度在兩行中分裂，如果在狹窄的空間中使用。

來源

2015-06-09 06:34:12

標籤選和單選淘汰賽

回答

相關問題