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

【问题标题】：Toggle divs based on checkbox selection in dialog根据对话框中的复选框选择切换 div
【发布时间】：2014-11-09 16:34:00
【问题描述】：

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

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/

【问题讨论】：

标签： jquery checkbox toggle

【解决方案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。我注意到您使用复选框类型作为选择器，在这种情况下，您可能希望删除取消函数中的双引号。

【讨论】：