基于在下拉列表中选择不同的项目,我生成带有复选框的项目的 html。如何保留复选框的状态,即每当下拉列表中的值发生变化时选中/取消选中。请参阅此处的 plunkrhttps://plnkr.co/edit/PUG3g7dfTbQjPyIgGLzh?p=preview https://plnkr.co/edit/PUG3g7dfTbQjPyIgGLzh?p=preview
Steps:
- uncheck 'abc2'
- change dd value to 'international'
- again change the dd value to 'local'
- here 'abc2' must be unchecked...
这是我的代码:
var data = [
{type: 'local', name: 'abc1', location: 'xyz1', checked: true},
{type: 'local', name: 'abc2', location: 'xyz2', checked: true},
{type: 'international', name: 'abc3', location: 'xyz3', checked: true},
{type: 'local', name: 'abc4', location: 'xyz4', checked: true},
{type: 'local', name: 'abc5', location: 'xyz5', checked: true},
{type: 'international', name: 'abc6', location: 'xyz6', checked: true},
{type: 'international', name: 'abc7', location: 'xyz7', checked: true}
];
var $container = $('#container');
var $splitDD = $('#testDD');
var splitDD$ = Rx.Observable.fromEvent($splitDD, 'change')
.startWith($splitDD.val())
.map(function(e) { $container.html(''); return e.target ? e.target.value : e;})
.switchMap(function(v) {return data;})
.filter(function(v) {
return v.type == $splitDD.val()
})
.map(getHtml)
.subscribe(function(html) {
$container.append(html);
});
function getHtml(v) {
var checked = v.checked ? 'checked="checked"' : '';
var html = '<label><input class="point" name="' + v.name + '" type="checkbox" ' + checked + '>' +
'<span>' + v.name + ' </span>' +
'</label>';
return html;
}