Radio input as a div

Question

In the snippet below you will see that I am styling a radio button to look like a button. I am wanting these buttons to work just as the radio button would in its normal state. Right now both radio buttons are taking on the active class from my javascript on page load. This should only happen if they are selected.

Also, the fadeToggle from the if-statement that produces the extra input under the radio buttons is functioning as if the radio buttons are checkboxes. I have to click on the same button twice to de-activate it. I think this is based on the issue above.

Does anyone have any ideas what I am doing wrong?

var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
  $('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
  var radioCheck = $('.radio', this).val();
  $('.radioTransform', this).toggleClass('active');
  console.log(radioCheck);
  if (radioCheck == 'Yes') {
    $('#ansYes').fadeToggle(400);
  }
});

.radio {
  display: none;
}

#pushR {
  margin-right: 25px;
}

.radioTransform {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  background: #dbc8ca;
  cursor: pointer;
  padding: 15px 0;
}

.radioTransform.active {
  background: red;
}

.radioAnswer {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-align: center;
}

#ansYes {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
  <div class="formField">
    <div class="radioTransform" id="pushR">
      <span class="radioAnswer">YES</span>
      <input type="radio" value="Yes" class="radio">
    </div>
    <div class="radioTransform">
      <span class="radioAnswer">NO</span>
      <input type="radio" value="No" class="radio">
    </div>
  </div>
  <div class="formField" id="ansYes">
    <label class="label">How are you doing?</label>
    <input type="text" class="input">
  </div>
  <input type="submit" value="Submit RSVP" id="submit">
</form>

Answer 1

You don't need Javascript at all for this - only some intelligent CSS and a slight restructuring of your markup. This change will even increase the semantic value and accessibility of your solution.

I have only added Javascript for some console.logging so you see the snippet works.

Please note that in order to make radio buttons work like expected, they need to share the name attribute, otherwise both can be "on".

const radios = Array.from(document.querySelectorAll('[name="yesno"]'))

for (const radio of radios) {
  radio.addEventListener('change', function() {
    value.textContent = document.querySelector('[name="yesno"]:checked').value
  })
}

.radio {
  display: none;
}

.radioAnswer {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  background: #dbc8ca;
  cursor: pointer;
  padding: 15px 0;
  transition-duration: .4s;
  position: relative;
}

.radioAnswer::before {
  display: inline-block;
  content: "";
  border-width: 0 2px 2px 0;
  border-color: transparent;
  border-style: solid;
  width: 0;
  height: 0;
  transition: width .4s linear .1s, 
    height .2s linear 1.6s;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: rotate(35deg) translateY(-50%);
  transform-origin: center right;
}

input[type=radio]:checked+.radioAnswer {
  background: #0a0;
  color: #fff;
}

input[type=radio]:checked+.radioAnswer::before {
  border-color: #fff;
  transform: rotate(35deg) translateY(-50%);
  height: 1.5em;
  width: .8em;
  transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s
;  position: absolute;
}

.radioAnswer {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-align: center;
}

<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
<label class="radioAnswer" for="yes">Yes</label>
<input type="radio" value="No" class="radio" name="yesno" id="no">
<label class="radioAnswer" for="no">NO</label>
<p>Selected Value: <strong id="value"></strong></p>

Answer 2

In order to achieve the toggling effect of the radio button with the backgrounds, $('.radioTransform', this).toggleClass('active'); will not be enough.

First, taking into consideration it is already inside a click handler which is attached to $('.radioTransform'), when you add this as second argument of $('.radioTransform', this).toggleClass('active'); you are telling it to look for .radioTransforms inside a .radioTransform, cause you are setting .radioTransform as the context of the selector, that's why it does not change color. And even if you remove this, you would be toggling the class for every .radioTransform there is (how many times did I write radioTransform?:) )

Second, remove background: red from .radioTransform when it is not active, else you will never see it happen

var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
  $('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
  var radioCheck = $('.radio', this).val();
  $(this).toggleClass('active');
  $(this).siblings('.radioTransform').toggleClass('active', !$(this).hasClass('active'));
  console.log(radioCheck);
  if (radioCheck == 'Yes') {
    $('#ansYes').fadeToggle(400);
  } else {
    $('#ansYes').fadeOut(400);
  }
});

.radio {
	display: none;
}
#pushR {
	margin-right: 25px;
}
.radioTransform {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
}
.radioTransform {
	/*background: red;*/
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes {
  display: none;
}

.radioTransform.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
  <div class="formField">
    <div class="radioTransform" id="pushR">
      <span class="radioAnswer">YES</span>
      <input type="radio" value="Yes" class="radio">
    </div>
    <div class="radioTransform">
      <span class="radioAnswer">NO</span>
      <input type="radio" value="No" class="radio">
    </div>
  </div>
  <div class="formField" id="ansYes">
    <label class="label">How are you doing?</label>
    <input type="text" class="input">
  </div>
  <input type="submit" value="Submit RSVP" id="submit">
</form>

Answer 3

Your if condition block only works when you clicked yes button. Then what if you clicked No, for this condition you can have else statement. And here in this code radioTransform div don't have active class on load.

var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
  $('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
  var radioCheck = $('.radio', this).val();
  console.log(radioCheck);
  
  $(this).toggleClass('active');
  if (radioCheck == 'Yes') {
    $('#ansYes').fadeToggle(400);
   if($(this).next('.radioTransform').hasClass('active')){
    $(this).next('.radioTransform').removeClass('active');
   }
  } else {
    $('#ansYes').fadeOut(400);
  if($(this).prev('.radioTransform').hasClass('active')){
   $(this).prev('.radioTransform').removeClass('active');
   }
  }
});

.radio {
  display: none;
}

#pushR {
  margin-right: 25px;
}

.radioTransform {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  background: #dbc8ca;
  cursor: pointer;
  padding: 15px 0;
}

.radioTransform.active {
  background: red;
}

.radioAnswer {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-align: center;
}

#ansYes {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
  <div class="formField">
    <div class="radioTransform" id="pushR">
      <span class="radioAnswer">YES</span>
      <input type="radio" value="Yes" class="radio">
    </div>
    <div class="radioTransform">
      <span class="radioAnswer">NO</span>
      <input type="radio" value="No" class="radio">
    </div>
  </div>
  <div class="formField" id="ansYes">
    <label class="label">How are you doing?</label>
    <input type="text" class="input">
  </div>
  <input type="submit" value="Submit RSVP" id="submit">
</form>