Question

Javascript的新手，我正在努力解决一些基本挑战：我想根据相应复选框的选择来切换div。这些复选框放在一个对话框中，单击保存按钮后应该应用选择。我可以找到在选择相应的复选框时立即切换div的示例。

HTML：

<button id="filterDialog">Select DIVs</button>
<div id="filters" title="filters">
    <label><input type="checkbox" name="filters" value="div01">div01</label>
    <label><input type="checkbox" name="filters" value="div02">div02</label>
</div>
<div id="div01"></div>
<div id="div02"></div>

JS：

$(function() { 
        checkState = [];
        var buttons = {
                Cancel: cancel,
                Save: save
        };

        $('#filterDialog').click(function() { $('#filters').dialog('open'); });

        $('#filters').dialog({ 
                autoOpen: false, 
                modal: true,
                buttons: buttons,
                open: openDialog
        });
});

function openDialog() {
    $(':checkbox', this).each(function() {
        $(this).prop('original', $(this).is(':checked'));
    });
}

function select() {
        $(':checkbox', this).prop('checked', true);
}

function deselect() {
        $(':checkbox', this).prop('checked', false);
}

function save() {
        // what to implement, so that divs are displayed accordingly to checkboxes?
        $(this).dialog('close');
}

function cancel() {
        $(this).find('input[type="checkbox"]').each(function() {
            $(this).prop('checked', $(this).prop('original'));
        });
        $(this).dialog('close');
}

http://jsfiddle.net/rhdNH/86/

Answer 1

试试这个 -

function save() {
    // what to implement, so that divs are displayed accordingly to checkboxes?

  $(this).find('input[type=checkbox]').each(function() {
    var val = $(this).val()
    if ($(this).prop('checked') === true)
    {
        $('#' + val).show();
    }
    else
    {
        $('#' + val).hide();
    }
});

    $(this).dialog('close');
}

以下是更新后的Fiddle。我注意到你使用复选框的类型作为选择器，在这种情况下你可能想要删除取消函数中的双引号。

根据对话框中的复选框选择切换div

1 个答案: