IE under the radio button hidden after clicking on the corresponding label cannot be selected bug resolved

Project, sometimes fill out the form our options will hide the radio or checkbox, and only display to the user corresponding text selection, if the user click on the label selection, in the Ff/chrome and other standard browser hidden radio/ The checkbox also changes with the selected state, while under IE it does not change.

Note that you need to specify the ID property of the form element and then use the label's for property to bind the control.

code example:


<input type= "Radio" name= "Gender" id= "Gender1" value= "male" checked= "checked"/>
<label for= "Gender1" > Men </label>
<input type= "Radio" name= "Gender" id= "Gender2" value= "female"/>
<label for= "Gender2" > Women </label>


With CSS settings Display:none or Visibility:hidden hide the radio button, when you click the label toggle selection State, the corresponding button is actually not changed state. There are several ways to resolve this:


1. Use JavaScript scripts to re-manipulate DOM to ensure selection status


$ ("label"). Click (function (e) {
E.preventdefault ();
$ ("#" +$ (This). attr ("for"). Click (). change ();
});
2. Avoid the problem by positioning the position property outside the viewable area without using Display:none.
Position:absolute;
Top: -999px;
Left: -999px;
3. Hide the element by z-index/width or transparency opacity.
input{
Position:absolute;
Z-index:-1;
}
or a
input{
width:0;
}
or a
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
Filter:alpha (opacity:0);

}

As a reminder, the for property of the label is an inline element, and its corresponding JS attribute is htmlfor, such as the ability to access or set the For property value. document.getElementById ("xxx"). htmlfor= "inputID";;



At present, IE6-IE9 have such a problem, do not know IE will not be in line with the standard browser behavior. Hope it!!

IE under the radio button hidden after clicking on the corresponding label cannot be selected bug resolved