Question

我有一个复选框列表，其中包含我存储在pageload变量中的某些设置。现在我想检查它们与原始状态的每一个变化，以便在原始状态恢复时我可以做一些事情。

不幸的是，我不知道如何根据变量中的状态检查状态。有人能指出我正确的方向吗？

这是我到目前为止所得到的：

var ocs = $('.abocenter .subscriptions-lists input[type="checkbox"]');
$('.abocenter .subscriptions-lists').on('change', 'input[type="checkbox"]', function() {
    //Check against ocs somehow
});

复选框有4种不同的名称类型，主要是重复值。

解

我选择了最简单的解决方案。作为一项要求，我为每个复选框元素提供了一个数据自定义属性，如下所示：

<input type="checkbox" name="weekly" value="company" data-checked="true" checked>Company News
<input type="checkbox" name="weekly" value="structured" data-checked="false">Structured Finance

现在我只循环遍历每个复选框并将值与当前状态进行比较：

$(".subscriptions-lists").on('change', 'input[type="checkbox"]', function() {
    var indicator = true;
    $(".subscriptions-lists input[type='checkbox']").each(function() {
            if($(this).prop('checked') !== $(this).data('checked')) {
                indicator = false;
                //No more original state
            }
            if(indicator === false) {
                return;
            }
        }).promise().done( function() {
            if(indicator === true) {
                //Original State restored, do sth. :)
            }
        });
    });

虽然我对我的问题有一些好的答案，但我相信这对我来说是最好最简单的解决方案。

谢谢大家的帮助！

Answer 1

您不能使用ocs来获取原始状态，因为它只包含对html元素的引用。然后，当它们发生变化时，您在ocs中看到的数据也会发生变化。

但是如果你想知道默认的检查状态，你可以使用

this.hasAttribute('checked')

请注意，只有在您以正确方式更改其选中状态（即使用checked属性或jQuery的prop()）时，此方法才有效。如果您使用setAttribute()或jQuery的attr()，则无法使用。

Answer 2

假设所有元素都有“名称”，我个人会这样做 -

var $subscriptionsLists = $('.abocenter').find('.subscriptions-lists'); // This is more efficient than a chained selector

var ocs = {}; // Plain JavaScript object

$subscriptionsLists.find('input[type="checkbox"]').each(function (index, checkbox) { // See http://api.jquery.com/each/ for details of the method
    ocs[checkbox.name] = checkbox.checked; // checkbox is a DOM element and not jQuery in each loop. See https://developer.mozilla.org/en-US/docs/Web/API/Element.name and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
});

$subscriptionsLists.on('change', 'input[type="checkbox"]', function (event) {
    if (ocs[this.name] !== this.checked) {
        // Do something
    }
});

如果名称不可用，也可以使用此ID。

我在jsfiddle.net example

创建了一个有效的http://jsfiddle.net/oL28y3yx/

Answer 3

我制定的解决方案通过向每个复选框添加自定义数据存储属性来工作，因此它们都独立地保持自己的状态。

我添加了一个类似的JQuery扩展方法：

$.fn.IsOriginalState = function () {
    var data = $(this).prop("stateData");
    if (data == null || data == undefined) {
        data = {
            OriginalState: $(this).prop("checked"),
            CurrentState: $(this).prop("checked")
        }
        $(this).prop("stateData", data);
        data = $(this).prop("stateData");
    }
    return data.OriginalState == data.CurrentState;
};

然后，您可以通过正常选择并调用此函数来查明单个复选框是否处于原始状态。

$("#checkbox1").IsOriginalState();

在页面加载时，您可以通过在每个复选框上调用方法来填充它：

$(document).ready(function () {
    $("input[type='checkbox']").each(function() {
        $(this).IsOriginalState(); //Set the initial values
    });
});

最后一步是为每个设置更改事件处理程序以更改CurrentState属性。

$("input[type='checkbox']").change(function (data) {
    $(this).prop("stateData").CurrentState = $(this).prop("checked");
});

我已经组建了一个jsFiddle来演示：http://jsfiddle.net/xDaevax/1qmtkds9/

如果在所有复选框都处于原始状态时需要一个事件来处理条件（每次更改一个复选框时都会检查），我会创建一个自定义事件，每次更改复选框时都会触发该事件，比较复选框状态，如这样：

$(document).bind("check-changed", function (e) {
    var originalCount = 0;
    $("input[type='checkbox']").each(function () {
        if ($(this).IsOriginalState()) {
            originalCount++;
        }
    });
    var isOriginal = originalCount == $("input[type='checkbox']").length;
    if (isOriginal) {
        alert("Checkboxes are in their original state.");
    } // end if
});

然后使更改事件以这种方式运行：

$("input[type='checkbox']").change(function (data) {
    $(this).prop("stateData").CurrentState = $(this).prop("checked");
    $(document).trigger("check-changed");
});

检查变量中的原始状态的复选框状态

3 个答案: