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

我的脚本中有一个选择下拉列表，如果你点击一个entrie，你会在网站上添加一个过滤器，按流派对电影进行排序。剧本正在慢慢地进行着

<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>    

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

---

感谢您在JS文件中帮助我，请更改

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

致：

---

复选框似乎没有

更改
侦听器。
与我们共享您的js代码。也许我们可以帮我用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);

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

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