Question

我有一个带复选框的表单。单击该复选框时，它会显示隐藏的标签标记。

这是我使用的JavaScript：

$(".inline_collection :checkbox").click(function () {
    var hiddenVar = ".area" + this.value;
    if (this.checked) $(hiddenVar).show();
    else $(hiddenVar).hide();
});

这就是隐藏部分编码到正文中的方式：

<input type="checkbox" class="show_hide" value="1a" id="1a" name="1a"></input>
<div class="area1a hidden">
    <label for="output">Step Completed! <img src="img/redCheck.png" /></label>
</div>

现在，我使用以下JavaScript和jquery.cookie为复选框创建一个cookie，并在再次访问该页面时重新填充它：

$(":checkbox").on("change", function(){
    var checkboxValues = {};
    $(":checkbox").each(function(){
    checkboxValues[this.id] = this.checked;
});

$.cookie('checkboxValues', checkboxValues, { expires: 365, path: '/' })
});

function repopulateCheckboxes(){
    var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
        Object.keys(checkboxValues).forEach(function(element) {
            var checked = checkboxValues[element];
            $("#" + element).prop('checked', checked);
        });
    }
}   

$.cookie.json = true;
repopulateCheckboxes();

不幸的是，现在的方式是复选框重新填充，但隐藏区域再次隐藏在页面重新加载上。现在我在我的复选框显示/隐藏功能之前有我的cookie代码。我已尝试.on(function验证，onChange，但是当复选框重新填充时，我似乎无法显示隐藏区域。

Answer 1

您没有看到标签的原因是＆＃34;点击＆＃34;和＆＃34;改变＆＃34;事件全部只触发用户输入。即当有人点击复选框时。

当javascript更改状态时，不会触发这些事件。

我整理了一个非常hacky的代码快速更新，现在更新函数中的复选框标签，然后如果cookie被cookie或点击更改，则调用此函数。

警告，我实际上没有对此进行测试，因此可能存在语法问题，但无论如何它都是真正重要的概念。

$(".inline_collection :checkbox").click(function () {
    UpdateCheckboxLabel(this);
});

$(":checkbox").on("change", function(){
    var checkboxValues = {};
    $(":checkbox").each(function(){
        checkboxValues[this.id] = this.checked;
    });

    $.cookie('checkboxValues', checkboxValues, { expires: 365, path: '/' })
});

function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
        Object.keys(checkboxValues).forEach(function(element) {
            var checked = checkboxValues[element];
            $("#" + element).prop('checked', checked).each(function(){
                UpdateCheckboxLabel(this);
            });
        });
    }
}

function UpdateCheckboxLabel(t){
    var hiddenVar = ".area" + t.value;
    if (t.checked) $(hiddenVar).show();
    else $(hiddenVar).hide();
}

$.cookie.json = true;
repopulateCheckboxes();

Answer 2

在脚本中设置值不会触发您已设置的事件。要修复可见性的初始设置，而不对代码进行任何其他更改：

function repopulateCheckboxes() {
    var checkboxValues = $.cookie('checkboxValues');
    if(checkboxValues){
        Object.keys(checkboxValues).forEach(function(element) {
            var checked = checkboxValues[element];
            var jMatchingCheckbox = $(":checkbox[id='"+element+"']");
            if (jMatchingCheckbox) {
                jMatchingCheckbox.prop('checked', checked);
                $(".area" + jMatchingCheckbox.attr('id')).toggle(checked);
            }
        });
    }
}

在javascript中设置可见性的另一种方法是使用css选择器。

<style>
    .inline_collection input[type="checkbox"].show_hide:checked 
        ~ .show_only_when_checked 
    {
        display: block; 
    } 

    .inline_collection .show_only_when_checked 
    {
        display: none; 
    } 
</style>
<html>
    <span class="inline_collection">
        <input type="checkbox" class="show_hide" value="1a" id="1a" name="1a" />
        <div class="show_only_when_checked" data-checkbox-id="1a">
            <label for="output">Step Completed! <img src="img/redCheck.png" /></label>
        </div>
    </span>
</html>

http://jsfiddle.net/qnLKn/

处的一个简单的JsFiddle

复选框cookie并记住显示隐藏区域

2 个答案: