javascript - 将选择下拉列表更改为复选框

Question

我的脚本中有一个选择下拉菜单，如果您单击一个条目，您会立即向网站添加一个过滤器以按流派对电影进行排序。脚本如下所示

<select name="genres" class="form-control" data-bind="value: genre">
            <option value="">{{ trans('dash.genres') }}</option>

                @foreach ($options->getGenres() as $genre)
                    <option value="{{ strtolower($genre) }}">{{ $genre }}</option>
                @endforeach
        </select>

现在我想将选择下拉菜单更改为复选框，我通过休假实现了这一点

<ul>
                    @foreach ($options->getGenres() as $genre)
                    <li><input type="checkbox"  name="genres"  data-bind="value: genre"  value="{{ strtolower($genre) }}"/>{{ $genre }}</li>
                    @endforeach
</ul>    

但是如果我点击一个复选框什么也不会发生，现在我想要它如何与一页过滤器结果一起使用。

选择下拉列表会立即在页面上添加带有 js 的过滤器，我如何使用复选框执行此操作？任何想法如何改变或什么？

编辑

这是点击选择后流派进入的列表

<ul id="selected-genres" data-bind="foreach: params.genres" class="list-unstyled list-inline">
            <li data-bind="click: $root.removeGenre"><i class="fa fa-times"></i> <span     data-bind="text: app.utils.ucFirst($data)"></span></li>
</ul>

这是这个函数的Js文件

(function($) {
'use strict'

app.viewModels.titles.index = {

    /**
     * Stores all the games in their original state.
     * 
     * @type Array
     */
    sourceItems: ko.observableArray(),

    /**
     * Latest genre user has selected.
     * 
     * @type string,
     */
    genre: ko.observableArray(),


    /**
     * Stores all parameters user is currently restricting titles query by.
     * 
     * @type {Object}
     */
    params: {

        /**
         * Currently selected sorting option.
         * 
         * @type ko.observable(String)
         */
        order: ko.observable('mc_num_of_votesDesc'),

        /**
         * Stores users query to filters games on.
         * 
         * @type ko.observable(String),
         */
        query: ko.observable().extend({ rateLimit: { method: "notifyWhenChangesStop", timeout: 400 } }),

        /**
         * Filter titles that were released after this date.
         * 
         * @type ko.observable(String),
         */
        after: ko.observable(),

        /**
         * Filter titles that were released before this date.
         * 
         * @type ko.observable(String),
         */
        before: ko.observable(),

        /**
         * Filter movies to only ones that specified actors appeared in.
         * 
         * @type string
         */
        cast: ko.observable(),

        /**
         * Filter titles by genres.
         * 
         * @type string,
         */
        genres: ko.observableArray(),

        type: ko.observable(),

        minRating: ko.observable(),

        maxRating: ko.observable(),
    },

    /**
     * Uri to hit for paginated results.
     * 
     * @type {String}
     */
    uri: 'titles',

    /**
     * Remove a genre from genres array.
     * 
     * @param  string genre
     * @return void
     */
    removeGenre: function(genre) {
        app.viewModels.titles.index.params.genres.remove(genre);
    },

    start: function(type) {
        var self   = this,
            genres = app.utils.getUrlParams('genre'),
            page   = window.location.hash,
            paginations = $('.index-pagination');

        self.params.type(type);

        //filter by genres if they're present in url params
        if (genres) {
            $.each(genres.replace(/ /g,'').split(','), function(i,v) {
                self.params.genres.push(v);
            });
        }

        //push a genre user selects to genres array
        self.genre.subscribe(function(value) {

            if (value) {
                self.params.genres.push(value);
            }

        });

        //set a page if we found any in url hash
        if (page) {
            app.paginator.currentPage(page.replace('#page-', ''));
        }

        //change current page on url hash change
        $(window).bind('hashchange', function(e, b, c) {
            var hash = location.hash.slice(1);

            if (hash.indexOf('page-') > -1) {
                app.paginator.currentPage(hash.replace('page-', ''));
            }       
        });

        app.paginator.start(app.viewModels.titles.index, '#content', 18).success(function(data) {
            paginations.pagination({
                items: app.paginator.totalItems(),
                itemsOnPage: app.paginator.perPage(),
                displayedPages: 8,
                selectOnClick: false,
            });
        });

        app.paginator.paginate.subscribe(function(promise) {

            promise.success(function(data) {
                paginations.pagination('updateItems', app.paginator.totalItems());
                paginations.pagination('updateItemsOnPage', app.paginator.perPage());
            });

        });

        //scroll top when botom pagination is used
        $('.bottom-pagination').on('click', function(e) {
            if ( ! $(e.target).parent().is('.active')) {
                var body = $('html, body');
                body.animate({scrollTop:0});
            }
        });
    },
};

})(jQuery);

它与 Knockout.js 一起工作，我不包含缩小的代码

谢谢你帮助我

Answer 1

在你的JS文件中，请更改

$('select[name="genres"]').change(function() { ... });

到:

$('input[name="genres"]').change(function() { ... });

好像checkbox没有change监听器。