JavaScript\JQuery - 识别单选按钮值是否因点击而改变

Question

我有一个显示记录列表的页面。用户可以使用单选按钮选择记录状态，例如:

<div id="record_653">
  <label><input type="radio" name="status_653" value="new" checked/>new</label>
  <label><input type="radio" name="status_653" value="skipped" />skipped</label>
  <label><input type="radio" name="status_653" value="downloaded" />downloaded</label>
</div>

我正在使用 JQuery 将用户所做的更改发送回服务器，我在服务器上使用它们来更新数据库。这是我所做工作的简化版本:

$("#record_653").click( 
function(event) { 
    var url = ...,        
        params = ...;
    post(url,params);                    
});

问题在于，即使用户单击了之前选中的同一按钮，此代码也会创建请求。我真正想要的是“on change”事件，除了它在 Internet Explorer 中的行为不是很有用(例如 here )。

所以我认为我必须以某种方式确定单击事件是否更改了值。

旧值是否存储在某处(在 DOM 中？在事件中？)以便我可以与它进行比较？

如果不是，我应该如何存储旧值？

Answer 1

旧值没有存储在您可以查询的地方，不。您将需要自己存储该值。您可以使用 javascript 变量、隐藏的 input 元素或 jQuery 的 data() 函数。

编辑

jQuery data 函数提供对键值对数据结构的访问，作为为给定元素存储任意数据的一种方式。该 API 如下所示:

 // store original value for an element
 $(selector).data('key', value);

 // retrieve original value for an element
 var value = $(selector).data('key');

一个更成熟的想法:

$(document).ready(function() {

    // store original values on document ready
    $(selector).each(function() {
        var value = $(this).val();
        $(this).data('original-value', value);
    })

    // later on, you might attach a click handler to the the option
    // and want to determine if the value has actually changed or not.
    $(selector).click(function() {

        var currentValue = $(this).val();
        var originalValue = $(this).data('original-value');
        if (currentValue != originalValue) {

            // do stuff.

            // you might want to update the original value so future changes
            // can be detected:
            $(this).data('original-value', currentValue);
        }

    });

});