Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked

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

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.

Radio buttons do not check when clicking the label

The label must have the "for" attribute for an input element to react to a click on its label.

The value of the "for" attribute must be an "id" of an input element.

I believe it should work if you add "id" property to the Radio element.

More information can be found here: HTML element

IE not selecting form field when label is clicked an form field is hidden

I've experienced this before as well. You may be better off moving the hidden fields off the screen instead of hiding them.

In fact, I did ask that question on SO:

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

Change the div class if user checked a radio button

If you want to toggle classes on elements based on some sort of variable value, I'd recommend checking out the docs on class bindings to get a better grasp on what's possible and how.

But the gist of it is this:

<!-- is-active will be toggled when this radio is selected -->
<div class="choise-block" :class="{ 'is-active': picked == 1 }">
  <div class="form-check">
    <input
      class="form-check-input"
      type="radio"
      v-model="picked"
      :value="1"
      id="question-1"
    />
    <label class="form-check-label" for="question-1"> Question 1 </label>
  </div>
</div>

You can see it in action in this codesandbox demo thing I made for ya. Good luck.

Custom Radio Button Not Displaying Both Buttons

You missed writing <span>

Your custom button related to <span> which styled CSS.

/*Remove Default Radio Button */
input[type=radio] {  display: none;}

/*Add new radio buttons*/
[type="radio"] + span::before {  content: '';  display: inline-block;  width: 1em;  height: 1em;  vertical-align: -0.25em;  border-radius: 1em;  border: 0.125em solid #fff;  box-shadow: 0 0 0 0.15em #000;  margin-right: 0.75em;  transition: 0.5s ease all;}
[type="radio"]:checked + span::before {  background: #61ce70;  box-shadow: 0 0 0 0.25em #000;}

<ul class="wcsatt-options-cart">  <li>    <label>          <input type="radio" name="convert_to_sub" value="0">          <span>No thanks. </span>        </label>  </li>  <li>    <label>          <input type="radio" name="convert_to_sub" value="1_month" checked="checked">            <span class="subscription-details">Yes, every month</span>.                           </label>  </li></ul>

Custom Radio Buttons - broken in IE

Here is the broken code from Murphy. http://jsfiddle.net/GRstu/10/

Note the CSS line in the fiddle input[type=radio]{display:none;}. That line will cause the radio button to not get checked/unchecked when the label is clicked. This is just how IE works. You will need to do a workaround to check the hidden radio when the corresponding label is clicked.

You can do that by adding a line to the click event:

$('label').click(function() {
    $(this).children("input").prop("checked", true);  //This is the key
    setupLabel();
});

Here is the jsfiddle of the solution: http://jsfiddle.net/GRstu/11/

Note that this is a similar solution and problem to that brought forward in this question:
Labels and hidden fields in Internet Explorer (and jquery)

Display HTML5 error message/validation on hidden radio/checkbox

as @joostS said, hidden radio button will not trigger native error message. for that we need to hide it using opacity. I have created sample example.

Also it will not trigger validation until we submit the form by clicking on submit button. If you need validation on "onChange" event of any form elements, then we need to use jQuery or Javascript solution to achieve that.

I hope it will be helpful.

label { display: inline-block; border: 2px solid #83d0f2; padding: 10px; border-radius: 3px; position: relative;}
input[type="radio"] {  opacity: 0; position: absolute; z-index: -1;}
input[type="radio"]:checked +label {  border: 1px solid #4CAF50;}
input[type="radio"]:invalid +label {  }

<h3>Gender</h3><form>    <input id="male" type="radio" name="gender" value="male" required>  <label for="male">Male</label>
   <input id="female" type="radio" name="gender" value="female" required>  <label for="female">Female</label>
   <input id="other" type="radio" name="gender" value="other" required> <label for="other">Child</label>
 <input type="submit" /></form>

Radio Button Selection in React

Just custome like this: https://codesandbox.io/s/react-styled-components-radio-button-forked-efxzd?file=/src/Radio.js:1554-1613

In the App:

const handleSelectChange = (value) => {
  setSelect(value);
};

<RadioButton
  handleChange={handleSelectChange}
/>

And in the RadioButton:

const handleChecked = () => {
  handleChange(value);
};

<Item onClick={handleChecked}>

Ie - Hidden Radio Button Not Checked When the Corresponding Label Is Clicked