Radio Button and display NONE when clicked

JavaScript
1
  1. I have radio group buttons but when I click on chosen radio button it should show a style without value:
style=""

I try to add a rectangular box when the radio button is clicked.
but when I click on another radio button remove style display: NONE.

style="display: none;"

How to manage JavaScript in the correct element status?

Radio buttons as an example:

<div class="content">
  <fieldset>
    <legend>Please choose your favourite snack:</legend>
    <div class="radio-wrapper">
      <input id="cookie" type="radio" name="snack" value="cookie"/>
      <label for="cookie">Cookies 🍪</label><br>
    </div>
    <div class="radio-wrapper">
      <input id="apple" type="radio" name="snack" value="apple">
      <label for="apple">Apple 🍏</label><br>
    </div>
    <div class="radio-wrapper">
      <input id="pretzels" type="radio" name="snack" value="pretzels">
      <label for="pretzels">Pretzels 🥨</label>
    </div>  
  </fieldset>
</div>
2

Suggestion: Don’t use Javascript. Especially because what you’re trying to mess with is a CSS class.

input[type="radio"]:checked + label:after,
input[type="radio"]:checked + label:before {
  position: fixed;
  opacity: 0;
  pointer-events: none;
}
3

Thank you for the message.
I tried to fix this but there is already code and it will collapse: &::after {

Can you post the whole code to test this option? CodePen…or…

4

Take that block. Stick it at the very end of your CSS. Annnnd done.

5

I have solved using checkbox and Bootstrap V3 feature. But how to solve using radio button?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />

<title>Checkbox button and payment method</title>
</head>

<body>

<div class="form-group">
<div class=""><input data-toggle="collapse"  aria-expanded="false" data-target="#accordion" type="checkbox" name="payment_method" />Credit card payment method</div>
</div> 
 
<dl>

<div id="accordion" class="collapse" style="" data-modul="payment_method">

<div class="">


<div class="form-group">

<dd>

<label>Credit card</label>
<input type="text" name="creditcard" value="" class="" style="" />

</dd>

<dd>

<label>Credit card options</label>
<input type="text" name="creditcardoptions" value="" class=" form-control" style="" />

</dd>

</div></div></div><!-- .accordion -->


</body>
</html>
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.