Question

我正在使用从{javascript文件中填充的Eric Hynds jQuery MultiSelect Widget。我可以通过从下拉列表中检查来动态添加复选框。我正在尝试附加新复选框和下拉复选框的“值”以显示在“主”复选框下，如果它也被选中。为了帮助说明内部的评论：http://jsfiddle.net/3u7Xj/12/

参考文献：

<select id="select" multiple="multiple" class="multiselect">
</select>
<input type="checkbox" name="chkMain1" value="Main1" id="Main1"><label for="Main1">Main1</label><br />
<input type="checkbox" name="chkMain2" value="Main2" id="Main2"><label for="Main2">Main2</label><br />
<input type="checkbox" name="chkMain3" value="Main3" id="Main3"><label for="Main3">Main3</label><br />

从js文件填充下拉小部件：

var MYdata=[{
    "Value":"1",
    "ValueText":"name1"
}
,{
    "Value":"2",
    "ValueText":"name2"
}
,{
    "Value":"3",
    "ValueText":"name3"
}];    
$('#select').html(function(){
    return $.map(MYdata, function(v) {
        return "<option id='"+ v.Value +"'>" + v.Value + "-" + v.ValueText +"</option>";
    }).join('');
});

非常感谢任何帮助

Answer 1

希望这会为你提供一些指导方向..

click: function (event, ui) {
            var lbl = ui.value;
            if(ui.checked){
                var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');    
                });
            }
            else {
                $("[id^=Main]:checked").each(function(){
                    $(this).nextAll('.holder:first').find('div input[id='+lbl+']').parent().remove();
                });
            }

            if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
                return false;
            }

        }

示例：

http://jsfiddle.net/trevordowdle/3u7Xj/14/

从多选jQuery UI小部件动态添加复选框

1 个答案: