IE - hidden radio button not checked when the corresponding label is clicked

问题:

I just noticed a strange behaviour in IE7.

I have radio buttons with associated labels as follows:

Activities  Services 

The radio button is hidden via css with display:none or visibility: hidden (don't ask)

The problem is - when I click the label in IE7 (haven't looked at other IE versions yet) the associated radio button is not actually checked. I confirmed this with jquery - the label click event is fired, but the radio button click event is not. A form post also confirms that the checked radio button does not change.

This works correctly in firefox, and also works correctly if I remove the CSS that hides the radio buttons.

Is this an IE bug or am I missing something?

回答1:

It probably is to do with the display: none - you may also find that hidden elements don't get their values submitted with the rest of the form. If you have control over it, you may want to try positioning the elements off screen rather then hiding them.

回答2:

This is a wiki answer to bring together all the different answers and options.

Option 1: Move the element off-screen as opposed to hiding it completely

position: absolute; top: -50px; left: -50px; 

Option 2: Use a bit of JavaScript to set the radio button to checked when the label is clicked

$("label").click(function(e){     e.preventDefault();      $("#"+$(this).attr("for")).click().change();  }); 

Option 3: Set the element's width and/or opacity to zero

width: 0; /* and/or */ -moz-opacity:0; filter:alpha(opacity:0); opacity:0; outline:none; /* this prevents IE8 from having the line around it even though it's invisible */ 

Option 4: Use another browser :)

Basically, the spec for these things doesn't specifically state what behavior to use, but IE generally takes the stance that if it can't be seen, then it doesn't work. "Seen" and "work" can mean different things, but in this case it means that when display:none is set, the label doesn't activate the radio button, which leads to the usual workarounds necessary for so many things in IE.

回答3:

This works for me

width: 0px; 

Tested in IE7 and IE8. Pure CSS no javascript.

回答4:

This issue exists in IE6, 7, 8, and even the current 9 beta. As a fix, positioning the radio button offscreen is a good idea.

Here's an alternative that doesn't have to involve the designer or the css: Hide the button normally, and make whatever function handles the click event for the button also handle the click event for the label.

回答5:

$("label").click(function(e){     e.preventDefault();      $("#"+$(this).attr("for")).click().change();  }); 

Thanks Lane for this. I'm adding it as an answer here so people don't overlook your comment.

回答6:

Replace

style="display:none;" 

with

style="-moz-opacity:0;filter:alpha(opacity:0);opacity:0;" 

回答7:

You can try this for IE7,8:

input{     position: absolute;     z-index: -1; } 

instead of

input{     display: none; } 

回答8:

There is some nice compilation of Your propositions:

input { -moz-opacity:0; filter:alpha(opacity:0); opacity:0; position: absolute; } 

instead of:

display: none; 

回答9:

I was using jQuery hide() function, so it wasn't easy to change the way an element is hide without writing a more complex code. I found this idea: I use class to store the checked attribute and set this attribute back again just before the submit.

if ($.browser.msie && $.browser.version == 7.0) { $('input[type=radio]').click(function() {     $('input[name="'+$(this).attr("name")+'"]').each(function(){         if ($(this).attr("checked")){             $(this).addClass("checked");         }else{             $(this).removeClass("checked");         }     }); }); $('form').submit(function(){     $('input.checked').each(function(){         $(this).attr("checked","true");     }); }); } 

It works like a charm in my case.

文章来源: IE - hidden radio button not checked when the corresponding label is clicked