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

私の提案は、チェックボックスのオプションをフォームの外側の隠し 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
    }
});

利点は 2 つあります。ユーザーの選択を保持し、チェックボックスのオプションをキャッシュすることで、不要な要求をなくして時間を節約できます。

于 2013-09-18T01:24:42.717 に答える
0

チェックボックスの状態を永続的に、つまりデータベースに保存して、ユーザーがサイトにアクセスするたびに、またはセッションのように一時的に利用できるようにする必要がありますか？基本？

永続的に、シリアル化された配列をサイトに戻す必要があります (別の $.ajax コマンドを使用する可能性があります)。

一時的に、チェックボックスの状態をユーザーのマシンの Cookie に保存し、この投稿のような次のページに状態を適用することができます

クリックせずにチェックボックスの状態をCookieに保存する

于 2013-09-17T22:09:23.813 に答える