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）。

所以我想我不得不确定click事件是否改变了值。

旧值是存储在某个地方（在事件中的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); } }); });

Answer 2

$('#record_653 input:radio').each(function() {
    $(this).data('isChecked', $(this).is(':checked'));

    $(this).click(function() {
        if ( $(this).is(':checked') !== $(this).data('isChecked') ) {
            // do changed action
        } else {
          $(this).data('isChecked', !$(this).data('isChecked') );
        }
    })

});

这在我的头脑中很复杂，但我认为你想要这样的东西。

Answer 3

正如meder和Ken Browning所建议的那样，我最终使用JQuery的data（）来存储以前的值，并在每次点击时检查它。

为每个输入无线电存储“已检查”布尔值是一种解决方案。但是，您需要保持此值。因此，在click事件处理程序中，除了更改当前输入的“is checked”之外，还需要查找先前检查过的输入并将其“已检查”数据更改为false。

我选择做的是在父元素中存储当前检查的对象。所以我的代码看起来像：

$(document).ready(  
    function()  {
        // find the checked input and store it as "currChecked" for the record
        $("#record_653").data("currChecked", 
                             $(this).find("input:radio:checked")[0]);
        // add the click event
        $("#record_653").click( function(event) {
                 if ($(event.target).is("input:radio") && 
                     event.target !== $(this).data("currChecked")) 
                 {
                    $(this).data("currChecked", event.target);
                    handleChangeEvent(event);
                 }
            });

        });
    }
);

谢谢

Answer 4

我遇到了同样的问题，但是在FF中我设法使用onchange事件而不是onclick来处理它。

这正是我想要处理IE7的原因。奇迹般有效！感谢您提供详细的解决方案！

JavaScript \ JQuery - 通过单击识别单选按钮值是否更改

4 个答案: