Div behaving as a radio input

Question

Div behaving as a radio input

I have customized radio buttons to look like buttons using JavaScript. However, on page load, both buttons automatically receive the 'active' class instead of only when they are selected. Additionally, the fadeToggle function in the if-statement is behaving as though the buttons are checkboxes, requiring two clicks to deactivate. I suspect these issues are related.

Does anyone have any suggestions on how to fix this?

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>

javascript jquery css input

Answer 1

Answer №1

If you want to avoid using Javascript completely, you can achieve the same functionality with clever CSS and a simple reorganization of your HTML structure. This approach not only enhances the semantic meaning but also improves accessibility.

To demonstrate how it works, I have included some Javascript solely for console logging purposes.

Keep in mind that for radio buttons to function correctly, they must share the same name attribute; otherwise, both buttons can be selected simultaneously.

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

If you want to avoid using Javascript completely, you can achieve the same functionality with clever CSS and a simple reorganization of your HTML structure. This approach not only enhances the semantic meaning but also improves accessibility.

To demonstrate how it works, I have included some Javascript solely for console logging purposes.

Keep in mind that for radio buttons to function correctly, they must share the same name attribute; otherwise, both buttons can be selected simultaneously.

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 3

Answer №2

When you only trigger the yes button in your if condition block, what happens if you select no? In that case, it would be helpful to include an else statement as well. Additionally, the code snippet shows that the 'radioTransform' div does not initially have the active class upon loading.

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>

Answer 4

When you only trigger the yes button in your if condition block, what happens if you select no? In that case, it would be helpful to include an else statement as well. Additionally, the code snippet shows that the 'radioTransform' div does not initially have the active class upon loading.

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>

Answer 5

Answer №3

If you want to create a toggling effect for the radio button backgrounds, simply using

$('.radioTransform', this).toggleClass('active');

will not suffice.

Firstly, consider that the code is already within a click event handler attached to $('.radioTransform'). By adding this as the second argument of

$('.radioTransform', this).toggleClass('active');

, you are instructing it to search for .radioTransform elements inside another .radioTransform. This causes the color not to change. Even if you remove this, it would toggle the class on every occurrence of .radioTransform.

Secondly, ensure to remove background: red from .radioTransform when it is inactive; otherwise, the change may not be visible.

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 6

If you want to create a toggling effect for the radio button backgrounds, simply using

$('.radioTransform', this).toggleClass('active');

will not suffice.

Firstly, consider that the code is already within a click event handler attached to $('.radioTransform'). By adding this as the second argument of

$('.radioTransform', this).toggleClass('active');

, you are instructing it to search for .radioTransform elements inside another .radioTransform. This causes the color not to change. Even if you remove this, it would toggle the class on every occurrence of .radioTransform.

Secondly, ensure to remove background: red from .radioTransform when it is inactive; otherwise, the change may not be visible.

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>

Div behaving as a radio input

Answer №1

Answer №2

Answer №3

Similar questions

Javascript editing enhancement for real-time changes

Encountered an issue while trying to set up mocks with $route in vue-test-utils

Creating dynamic dropdowns with Ajax and HTML on the code side

A guide on iterating through an array to extract the initial character from every string

Hovering over one element in Jquery triggers actions on multiple elements simultaneously

The Material UI component successfully loads the options data list from the server response, however, it fails to return the selected value when an option

Unable to retrieve data with $.getJSON

Discover the highest value within an array of objects, along with any numerical object attributes that have a value greater than zero

Tips for successfully transmitting verified user input within an input field on a webpage through the combination of Selenium and Python

Is there a reason behind why this functionality is only applicable to a class component and not a functional one?

What are the best ways to condense this JavaScript snippet?

RxJS Observables trigger the onCompleted function after completing a series of asynchronous actions

Adding query parameters to the end of every link on a webpage

Steps for removing an embed after a set time period

Searching JSON Data for Specific String Value Using JavaScript

Implementing callbacks in Chart.js for hover events

How can you include a multi-layered array within another multi-layered array using TypeScript?

Modify the Google Translate dropdown using programming techniques

The functionality of Material UI Slider components becomes less responsive when enclosed and rendered in JSX

What is the best way to parse a JSON file in Angular?