javascript - 我如何抓取复选框/单选/文本输入的页面并检测其原始值的变化？

Question

我所有的复选框、单选框和文本输入都在 ID 的末尾附加了“_boom”。我想抓取这些 id 的页面，检测更改以查看其中是否有任何一个与其原始状态不同，如果是，则将 CSS 应用于页面上名为“保存”的按钮。到目前为止，这是我所拥有的，但它不起作用:

$('[id*="_boom"]').change(function() {
        var sType = $(this).getInputType(); //get the type of attribute we're dealing with
        if( sType === "checkbox" || sType === "radio" ){ //checkbox or radio type
            var originalCheckedState = $(this).prop("defaultChecked");
            var currentCheckedState = $(this).prop("checked"); 

            if(currentCheckedState !== originalCheckedState){
                $("a#save").css("color","#CCCCCC"); 
            }
        }

        if( sType === "text" ){ //text type
            var originalValue = $(this).prop("defaultValue");
            var currentValue = $(this).val();

            if(currentValue !== originalValue){
                $("a#save").css("color","#CCCCCC"); 
            }
        }

    }); 

Answer 1

我将 getInputType 更改为 prop('type') 并解决了第一个问题。 getInputType 不是 jQuery 函数。通过将 prop('defaultValue') 更改为 attr('defaultvalue') 解决了第二个问题。要从元素中获取自定义属性，您需要使用 attr。

$('[id*="_boom"]').change(function() {
        var sType = $(this).prop('type'); //get the type of attribute we're dealing with
        if( sType === "checkbox" || sType === "radio" ){ //checkbox or radio type
            var originalCheckedState = !!parseInt($(this).attr("defaultchecked"), 10);
            var currentCheckedState = $(this).prop("checked"); 

            if(currentCheckedState !== originalCheckedState){
                $("a#save").css("color","#CCCCCC"); 
            }
            else {
                $("a#save").css("color","#00FF00"); 
            }
        }

        if( sType === "text" ){ //text type
            var originalValue = $(this).attr("defaultValue");
            var currentValue = $(this).val();

            if(currentValue !== originalValue){
                $("a#save").css("color","#CCCCCC"); 
            }
            else {
                $("a#save").css("color","#00FF00"); 
            }
        }

    }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" defaultchecked="0" id="check_boom" />
<input type="radio" name="rad1" defaultchecked="1" checked id="radio_boom" />
<input type="radio" name="rad1" defaultchecked="0" id="radio2_boom" />
<input type="text" defaultValue="test" id="text_boom" />
<a href="http://www.google.com" id="save">Save</a>