如果复选框值与原始选中/未选中状态不同，则使用 javascript 显示警报答案

【问题标题】：Display an alert with javascript if checkbox value is different from original checked/unchecked state如果复选框值与原始选中/未选中状态不同，则使用 javascript 显示警报
【发布时间】：2014-03-03 20:12:37
【问题描述】：

所以基本上我有几个选中或未选中的复选框，具体取决于 mysql 数据库中的值。它们的已检查/未检查值也存储在名为“def”的属性中，该属性为 0 或已检查。我还编写了一些 javascript，将属性应用于称为“已选中”的复选框，当您选中和取消选中复选框时，该属性会发生变化。所以我想做的是在 javascript 中比较这两个值，当用户单击复选框时更改选中的属性时，如果选中的属性为 true 并且 def 为 0，那么它应该发出一个警报，说值是与默认值不同，否则如果 def 为 0，则它不应该做任何事情，并且检查为 false。我正在学习 javascript，这就是我目前在 JSfiddle 中所拥有的：http://jsfiddle.net/FCrSg/89/

这是我的 HTML 复选框：

<input class='checkboxstatus' def='0' type=checkbox></input>

还有我的javascript：

$(document).ready(function(){
$('.checkboxstatus').click(function(){
    this.setAttribute('checked',this.checked);
    if($(this).checked && $(this).def == '0'){
    //checkbox has changed
    alert('checkbox has changed from original value');
    }
 });
 });

【问题讨论】：

this.setAttribute('checked',this.checked); -- 嗯，考虑到这是复选框的默认行为，这似乎是多余的 - 只是说:)

标签： javascript checkbox

【解决方案1】：

正确的语法应该是

if (this.checked && $(this).attr("def") == 0)

但是，def 不是公认的或有效的属性，它应该是 data-def 才能完全有效。然后你可以这样做：

if (this.checked && $(this).data("def") == 0)

【讨论】：

谢谢，这对我有用。我听取了您的建议并使用了 data-def。
@John -- 很高兴听到这个消息！如果这一切都完成了，请务必标记答案。

【解决方案2】：

这是一个有效的小提琴：http://jsfiddle.net/cEGks/1/。

你需要使用jQuery函数.attr()(documentation)来获取def属性。我还将其更改为data-def for better browser support 并将逻辑分解为另一个函数以提高可读性。

您也不需要在复选框上设置属性checked。您可以使用 jQuery 的 .is(':checked') 来检查它是否被选中。

代码如下：

HTML：

<input class='checkboxstatus' data-def='1' type="checkbox" />

JS：

$('.checkboxstatus').click(function(){
    if(checkboxChangedFromOriginal($(this))) {
        alert('checkbox has changed from original value');
    }
 });

function checkboxChangedFromOriginal(checkbox) {
 return (checkbox.is(':checked') && checkbox.attr('data-def') == '0') ||
     (!checkbox.is(':checked') && checkbox.attr('data-def') == '1');  
}

【讨论】：