-1

我想设计引导多选插件的复选框。基本上我想为选中复选框的标签添加一个类。我可以通过这种方式获取选定的值，但不知道如何定位复选框。

<label class="checkbox">
   <input type="checkbox" value="red">Red
</label>

$('select').multiselect({
    onChange: function(element, checked) {
        var colors = $('select option:selected');
        $(colors).each(function(){
            $(this).parent().addClass('label-selected');
        });
    }
});

编辑：我发现的唯一方法是像这样编辑插件：

if (this.options.selectedClass) {
    if (checked) {
        $target.closest('li').addClass(this.options.selectedClass);
        $target.closest('li label').addClass('label-selected'); //ADDED THIS LINE
    }
    else {
        $target.closest('li').removeClass(this.options.selectedClass);
        $target.closest('li label').removeClass('label-selected'); //ADDED THIS LINE
    }
}
4

1 回答 1

0

我建议使用该onChange选项而不是手动编辑插件来执行此操作（更新到较新版本或集成修复程序时可能会遇到麻烦）。现在也可以在文档中找到以下示例：

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selected-parents').multiselect({
            buttonContainer: '<div id="example-selected-parents-container"></div>',
            onChange: function(options, selected) {
                // Get checkbox corresponding to option:
                var value = $(options).val();
                var $input = $('#example-selected-parents-container input[value="' + value + '"]');

                // Adapt label class:
                if (selected) {
                    $input.closest('label').addClass('active');
                }
                else {
                    $input.closest('label').removeClass('active');
                }
            }
        });
    });
</script>
<style type="text/css">
    #example-selected-parents-container label.active {
        font-weight: bold;
    }
</style>
<div class="btn-group">
    <select id="example-selected-parents" multiple="multiple">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
    </select>
</div>

onChange如果您还使用optgroups （即，将多个选项传递给onChange）或其他功能，您可能必须调整该功能。在这些情况下，还请查看您可能需要调整的以下选项：

  • onSelectAll
  • onDeselectAll
于 2016-04-24T12:42:48.983 回答