Question

所以我在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);
                        }
    });
});

感谢您的帮助

Answer 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);
    }
}

Answer 2

我认为这取决于您想要做什么，您是否需要永久保存复选框的状态，即数据库以便在用户访问您的网站时可用，或者更临时，如在会议的基础上？

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

暂时，您可以将复选框的状态保存到用户计算机上的cookie，并在下一页上应用类似于此帖子的状态

Saving checkbox state to cookie without clicking

Answer 3

我的建议是将复选框选项复制到表单外部的隐藏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
    }
});

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

在jQuery中保存并重新打开复选框列表

3 个答案: