0

所以我在 div 中有下拉列表和多个复选框

复选框列表在下拉列表更改时填充

我想保存选中的复选框，以便重新应用它们

我设法序列化选中的复选框

 $("#category").change(function() {
    var formData = $(this).parents('form').serialize();
    var checked = $('.check input:checkbox:checked').serializeArray();
    $.ajax({
        url: '/test/hardwares/getByCategory',
        type: 'Post',
        data: formData,
        success: function(data) {
            $('.check').html(data);
                        }
    });
});

谢谢您的帮助

4

3 回答 3

1

试试这个http://jsfiddle.net/Q4Gyq/

HTML

<select id="sel">
    <option value="0">A class</option>
    <option value="1">B class</option>    
</select>

<div id="opts">
    Food: <input type="checkbox" id="ifood" value="food" class="0 1" />
    Water: <input type="checkbox" id="iwater" value="water" class="0 1"/>
    Cable TV: <input type="checkbox" id="itv" value="tv" class="1" style="display: none" />
    Elevator: <input type="checkbox" id="ielev" value="elevator" class="1" style="display: none" />
</div>

Javascript

function stateManager(optsDiv){
    var _optsWrapper  = '';
    var _states       = {};
    var _currentState = null;

    var construct = function(optsDiv){
        _optsWrapper = optsDiv;
    }

    this.setStateId = function(stateId){
        _currentState = stateId;
    }

    this.save = function(stateToSet){
        _states[_currentState] = [];

        var checkedCheckBoxes = $(_optsWrapper).find('input[type=checkbox]:checked');
        for(var i = 0; i < checkedCheckBoxes.length; i++){
            _states[_currentState].push($(checkedCheckBoxes[i]).attr('id'));
        }

        this.setStateId(stateToSet);
    }

    this.getState = function(stateId){
        return _states[stateId] ? _states[stateId] : [];
    }

    construct(optsDiv);
}

window.onload = function(){
    var manager = new stateManager('#opts');
    manager.setStateId($('#sel').val());

    $('#sel').on('change', function(){
        manager.save(this.value);

        //extra functionality {
        filterCheckboxes(this.value);
        clearStates();
        //extra functionality }

        var state = manager.getState(this.value);        
        for(var i = 0; i < state.length; i++){
            $('#' + state[i]).prop('checked', true);
        }
    });
}

function filterCheckboxes(cls){
    var checkboxes = $('input[type=checkbox]');
    for(var i = 0; i < checkboxes.length; i++){
        $(checkboxes[i]).hasClass(cls) ? $(checkboxes[i]).show() : $(checkboxes[i]).hide();
    }
}

function clearStates(){
    var checkboxes = $('input[type=checkbox]:checked');
    for(var i = 0; i < checkboxes.length; i++){
        $(checkboxes[i]).prop('checked', false);
    }
}
于 2013-09-18T04:16:48.260 回答
0

我认为这有点取决于您想要做什么，您是否需要永久保存复选框的状态，即保存到数据库中，以便用户访问您的站点时可以使用它们，或者更临时地，例如在会话中基础？

永久地，您需要将您的序列化数组发布回您的站点（可能使用另一个 $.ajax 命令）

暂时，您可以将复选框的状态保存到用户机器上的 cookie 中，并在类似于这篇文章的下一页上应用状态

将复选框状态保存到 cookie 而不单击

于 2013-09-17T22:09:23.813 回答
0

我的建议是将复选框选项复制到表单外某处的隐藏 div 中。我试着把它写成一个段落，但它只是很多“选择”和“选项”，所以这里有一些伪伪代码

$("#dropdown").change( function() {

    var checkboxStash = $("#checkboxStash");   // a hidden container located
                                               // outside the form

    var checkboxSection = $("#checkboxes");    // the checkbox section in
                                               // your form

    // Grab all the current options
    var oldOptions = $(checkboxSection).html();

    // Stash the old options
    if( oldOptions are in stash) {
        replace them
    } else {
        add them to stash
    }

    // Clear the checkbox section
    $(checkboxSection).html("");

    // Check if the new category's checkboxes have been stashed
    var newOptions = $("#check-newCategory");

    if (newOptions exists) {
        checkboxSection.html(newOptions);
    } else {
        fetch the options from the server
    }
});

好处有两个：您可以保留用户的选择，并通过缓存复选框选项，您可以通过消除不必要的请求来节省时间。

于 2013-09-18T01:24:42.717 回答