Custom radio button not getting checked on clicking-CodePudding

I created a custom radio button using HTML and CSS

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}

.radio__input {
  display: none;
}

.radio__radio {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #87cac3;
  border-radius: 50%;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 2px;
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #87cac3;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s;
}

.radio__input:checked .radio__radio::after {
  transform: scale(1)
}

<div>
  <label for="myRadioId" class="radio">Agree
    <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">  
    <div class="radio__radio"></div>
 </label>
</div>

The code doesn't seem to work accurately means, the radio button is not getting checked on clicking. I think the problem is with the .radio__radio::after inside it i have done trnsform: scale(0) so it should default change its scale to zero on refreshing the page and when checked it should change the scale to 1.

CodePudding user response：

Use the following code, hope it will be helpful .

var val = 0;
$('input[name=myRadioField]').on("click", function(){
    console.log(val);
    if($(this).val()==val) 
    {$(this).prop('checked', false);
    val = -1;
    }
    else val = $(this).val();
});

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}

.radio__input {
  display: none;
}

.radio__radio {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #87cac3;
  border-radius: 50%;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 2px;
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #87cac3;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s;
}

.radio__input:checked .radio__radio::after {
  transform: scale(1)
}

.radio__input:unchecked .radio__radio::after {
  transform: scale(0)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <label for="myRadioId" class="radio">Agree
    <input type="radio" name="myRadioField" id="myRadioId" class="radio__input">  
    <div class="radio__radio"></div>
 </label>
</div>

CodePudding user response：

Thanks everyone for your inputs. The problem is solved I just added autocomplete= "off" inside <input> tag and it worked fine.

.container {
  padding-top: 10px;
  text-align: center;
}

.radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}

.radio__input {
  display: none;
}

.radio__radio {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #87cac3;
  border-radius: 50%;
  margin-left: 10px;
  box-sizing: border-box;
  padding: 2px;
  padding-bottom: 2px;
}

.radio__radio::after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: #87cac3;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.15s;
}

.radio__input:checked .radio__radio::after {
  transform: scale(1)
}

<div class="container">
  <h1>Question 1</h1>
  <h4>Agree
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="1">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="2">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="3">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="4">  
            <div class="radio__radio"></div>
          </label>
    <label class="radio">
            <input type="radio" name="myRadioField" id="myRadioId" class="radio__input" autocomplete="off" value="5">  
            <div class="radio__radio"></div>
          </label> Disagree
  </h4>
</div>