Javascript 如果至少有一个输入不是原始的，如何将CSS应用于链接，如果所有输入都是原始的，如何撤消该更改？

我的页面上有很多复选框、单选按钮和文本字段。它们都在id的末尾附加了“_boom”。我想检测这些输入中是否有任何一个不是其原始值，如果是，请将CSS应用于页面上名为“save”的按钮。然后，如果用户恢复了他们所做的任何更改，并且所有输入都有其原始值，那么我想撤销CSS

我已经接近了下面的代码。但假设我选中了3个复选框。选中第一个框后，CSS将更改。好!！我勾选第二和第三个方框。CSS保持不变。好!！但是我取消选中其中一个框，CSS就会恢复。糟糕！只有当我撤销每一个更改时，CSS才会恢复

$（'[id*=“_boom”]'）。更改（函数（）{
var sType=$（this.prop（'type'）；//获取我们正在处理的属性的类型
如果（sType==“checkbox”| | sType==“radio”）{//checkbox或radio类型
var originalCheckedState=$（this.prop（“defaultChecked”）；
var currentCheckedState=$（this.prop（“checked”）；
如果（currentCheckedState！==原始检查状态）{
$（“保存”）.css（“颜色”，即“CCCC”）；
}
否则{
$（“保存”）.css（“颜色”、“黑色”）；
}
}
if（sType==“text”）{//文本类型
var originalValue=$（this.prop（“defaultValue”）；
var currentValue=$（this.val（）；
if（当前值！==原始值）{
$（“保存”）.css（“颜色”，即“CCCC”）；
}
否则{
$（“保存”）.css（“颜色”、“黑色”）；
}
}
}); 
#保存{
颜色：黑色；
}
问题是，当其中一个更改为其原始值时，并不意味着没有更改。

因此，在else代码块中，应该检查所有输入，如果所有输入都是原始值，则从按钮中删除“save”类，否则保留它

var isChanged = function ($element) {
    var sType = $element.prop('type');
    if (sType === "checkbox" || sType === "radio") {
        var originalCheckedState = $element.prop("defaultChecked");
        var currentCheckedState = $element.prop("checked"); 
        if (currentCheckedState !== originalCheckedState) {
            return true;
        } else {
            return false;
        }
    } else if( sType === "text" ) {
        var originalValue = $element.prop("defaultValue");
        var currentValue = $element.val();
        if (currentValue !== originalValue) {
            return true;
        } else {
            return false;
        }
    }
};
var $inputs = $('[id*="_boom"]');
var isAnyChanged = function () {
    $inputs.each(function () {
         if (isChanged($(this))) {
             return true;
         }
    });
    return false;
};
$inputs.change(function () {
    if (isChanged($(this))) {
         $("a#save").css("color","#CCCCCC"); 
    } else if (!isAnyChanged()) {
         $("a#save").css("color","black"); 
    }
});

问题是，当其中一个更改为其原始值时，并不意味着没有更改。

因此，在else代码块中，应该检查所有输入，如果所有输入都是原始值，则从按钮中删除“save”类，否则保留它

var isChanged = function ($element) {
    var sType = $element.prop('type');
    if (sType === "checkbox" || sType === "radio") {
        var originalCheckedState = $element.prop("defaultChecked");
        var currentCheckedState = $element.prop("checked"); 
        if (currentCheckedState !== originalCheckedState) {
            return true;
        } else {
            return false;
        }
    } else if( sType === "text" ) {
        var originalValue = $element.prop("defaultValue");
        var currentValue = $element.val();
        if (currentValue !== originalValue) {
            return true;
        } else {
            return false;
        }
    }
};
var $inputs = $('[id*="_boom"]');
var isAnyChanged = function () {
    $inputs.each(function () {
         if (isChanged($(this))) {
             return true;
         }
    });
    return false;
};
$inputs.change(function () {
    if (isChanged($(this))) {
         $("a#save").css("color","#CCCCCC"); 
    } else if (!isAnyChanged()) {
         $("a#save").css("color","black"); 
    }
});

您的代码中有许多可能的改进，以使其更干净和标准化。而不是依赖于<代码> ID <代码>，您应该考虑<代码>类< /COD>属性和所有…但我不会修改你的代码。以下是现有代码的解决方案

其思想是循环所有表单元素，如果其中至少有一个元素与其默认值不同，则设置标志并退出循环

最后，检查该标志并相应地设置css

为此，我将您的元素封装到一个表单
form1

$（“#表单1:输入”）.change（函数（）{
var=false；
formElems=$（“#form1:输入”）；
对于（i＝0；i），您的代码中有许多可能的改进，使其更干净和标准化。例如，不依赖于<代码> ID <代码>应考虑<代码>类< /代码>属性和所有……但我不会修改您的代码。这是您现有代码的解决方案。

其思想是循环所有表单元素，如果其中至少有一个元素与其默认值不同，则设置标志并退出循环

最后，检查该标志并相应地设置css

为此，我将您的元素封装到一个表单
form1

$（“#表单1:输入”）.change（函数（）{
var=false；
formElems=$（“#form1:输入”）；
对于（i=0；i幸运的是，我不能使用表单元素方法，因为我使用的是一个第三方工具，该工具生成自己的专有HTML。但是，输入被包装在一个div中。我用“div”替换了您的“form”，并且仍然有效。您认为该方法有任何问题吗？不幸的是，我不能使用表单元素方法，因为我正在使用第三方工具，生成自己的专有HTML。但是，输入被包装在一个div中。我用“div”替换了您的“form”，并且仍然有效。您认为这种方法有任何问题吗？
<form id="form1">
<input type="checkbox" id="check_boom" />
<input type="checkbox" id="check1_boom" />
<input type="checkbox" id="check2_boom" />
<input type="radio" id="radio_boom" />
<input type="text" defaultValue="test" id="text_boom" />
<input type="text" defaultValue="test" id="text2_boom" />
<a href="http://www.google.com" id="save">Save</a>
</form>