Menu
I just noticed a strange behaviour in IE7.
I have radio buttons with associated labels as follows:
<input type="radio" name="filter" id="filter_1" value="Activities" checked="checked" /> <label for="filter_1">Activities</label> <input type="radio" name="filter" id="filter_2" value="Services" /> <label for="filter_2">Services</label> 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?
901
To select a radio button by clicking on its text in React:Add a label element for each radio button. The htmlFor prop of each label should be set to the id of each radio button. Click on the label element to select the radio button.
Using Input Radio checked property: The Input Radio checked property is used to return the checked status of an Input Radio Button. Use document. getElementById('id'). checked method to check whether the element with selected id is check or not.
If a radio button is checked, its checked property is true . Then, we assign the value of the selected radio button to the selectedSize variable. Since only one radio button in a radio group can be checked at a time, the loop is terminated immediately by the break statement.
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
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.
195
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
