Question

我有一个复选框，设置为true时必须显示灯箱。如果我再次单击该复选框，当该值设置为true时，它应将值更改为false并显示警告框。这在Firefox中运行良好。

但是在IE7中，当我将其值设置为true时单击该复选框时，该值不会更改为false。因此再次显示灯箱。只有当我再次单击该复选框时，该值才会更改为false，并显示警告框。

 <input class="checkbox" type="checkbox" id="chkbox"/>
 <a href="lightbox.html?KeepThis=true&TB_iframe=true&modal=true" class="thickbox" id="lightbox_link"></a>

我已使用更改功能更改复选框的值并相应显示。

 $("#chkbox").change(function(){

     alert(this.checked); //returns true in IE when clicked for the second time
     if(this.checked)
            {
               $("a#lightbox_link").trigger("click"); //displays the lightbox

            }
            else
            {
                $( "#dialog-confirm" ).dialog({
                        resizable: false,   
                        modal: true,
                        buttons: {  
                                   "OK": function() {
                                         $( this ).dialog( "close" );   
                                    },          
                                    Cancel: function() {
                                         $( this ).dialog( "close" );   
                                         $("#chkbox").attr("checked", true);    
                                    }                   
                                }
               })
            }

});

Answer 1

最好在复选框上处理click事件。然后在内部功能中，您可以检查$( this ).attr( 'checked' )，然后通过显示灯箱或隐藏它来处理此点击。

<强> EDITED

也使用$( this ).attr( 'checked' )代替this.checked。

Answer 2

IE中的change事件存在问题，当使用change事件时，版本5.5,6.0,7.0和8.0将无法正常运行。

According to Quirks Mode，

IE 5-8会在复选框或收音机模糊时触发事件，而不是在激活时触发事件。这是一个严重的错误，需要用户采取其他操作，并根据复选框和无线电上的更改事件阻止一致的跨浏览器界面。

复选框值仅在IE7中单击两次时更改

2 个答案: