Remove checked state of inline radio on keyup

Question

In the snippet below I have simulated a donation widget however when the user enters text into the input type="text" I want the checked radio to lose its checked state. Is there a CSS solution or will this require a jQuery function?

*,
*::before,
*::after {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #b6b6b6;
}

:-moz-placeholder {
  color: #b6b6b6;
  opacity: 1;
}

::-moz-placeholder {
  color: #b6b6b6;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #b6b6b6;
}

::-ms-input-placeholder {
  color: #b6b6b6;
}

::placeholder {
  color: #b6b6b6;
}

body {
  background: #fff;
  width: 100%;
  margin: auto;
  padding: 30px;
  min-width: 320px;
  max-width: 540px;
  border-radius: 3px;
}

.inline-radio {
  font-size: 19px;
  display: -webkit-box;
  display: flex;
  border-radius: 3px;
}

.inline-radio div {
  border: 1px solid #ededed;
  margin-top: -1px;
  margin-left: -1px;
  position: relative;
  -webkit-box-flex: 1;
  flex: 1;
}

.inline-radio div:last-child {
  color: #b6b6b6;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
}

.inline-radio input[type="radio"] {
  cursor: pointer;
  width: 100%;
  height: 60px;
  opacity: 0;
}

.inline-radio input[type="text"] {
  font-size: inherit;
  color: #b6b6b6;
  margin-left: 0.3rem;
  display: flex;
  border: none;
  outline: none;
}

.inline-radio label {
  position: absolute;
  top: 0;
  left: 0;
  color: #b6b6b6;
  width: 100%;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  pointer-events: none;
}

.inline-radio input:checked+label {
  background: #d81b60;
  font-weight: 500;
  color: #fff;
}

<div class="inline-radio">
  <div><input type="radio" name="title"><label>$5</label></div>
  <div><input type="radio" name="title" checked><label>$25</label></div>
  <div><input type="radio" name="title"><label>$50</label></div>
  <div><input type="radio" name="title"><label>$100</label></div>
  <div><span>$</span><input type="text" placeholder="Other Amount"></div>
</div>

dale landry · Answer 1 · 2020-06-21T08:01:44.617

You can use javascript with event listener on blur of the input of the text field. I used class and id set in the text field id other and inputs class donations. Wrapped everything in a for loop to iterate through the inputs to see which was being focused on in case the user deselects the text and selects a default value after filling out the text field. Then run a forEach loop on the inputs to see which is set to checked. Set a conditional that checks if the value.checked is set for that iteration and set it to false if it is.

This will ensure that the text and default values can never be set at the same time.

Second event listener that runs a loop on the default values using class def to see if the text field is set to a value other than '' (empty) and the user is clicking back onto a default selection for donation. If they click back on default value, reset the value of text field to nothing.

let inputs = document.querySelectorAll('.donation');
let other = document.getElementById('other');
let def = document.querySelectorAll('.def');
let x;
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('keyup', function() {
    if (other.value !== '') {
      inputs.forEach(function(value) {
        if (value.checked) {
          value.checked = false;
          other.parentNode.style.backgroundColor = '#d81b60';
          other.style.backgroundColor = '#d81b60';
          other.style.color = '#fff';

        }
      })
    }
  })
}  
for (let i = 0; i < def.length; i++) {
    def[i].addEventListener('click', function() {
      if (other.value !== '' && this.value || other.value === '' && this.value) {
        other.value = '';
        other.parentNode.style.backgroundColor = '#fff';
        other.style.backgroundColor = '#fff';
        other.style.color = '#bbb';
      }
    })
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #b6b6b6;
}

:-moz-placeholder {
  color: #b6b6b6;
  opacity: 1;
}

::-moz-placeholder {
  color: #b6b6b6;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #b6b6b6;
}

::-ms-input-placeholder {
  color: #b6b6b6;
}

::placeholder {
  color: #b6b6b6;
}

body {
  background: #fff;
  width: 100%;
  margin: auto;
  padding: 30px;
  min-width: 320px;
  max-width: 540px;
  border-radius: 3px;
}

.inline-radio {
  font-size: 19px;
  display: -webkit-box;
  display: flex;
  border-radius: 3px;
}

.inline-radio div {
  border: 1px solid #ededed;
  margin-top: -1px;
  margin-left: -1px;
  position: relative;
  -webkit-box-flex: 1;
  flex: 1;
}

.inline-radio div:last-child {
  color: #b6b6b6;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
}

.inline-radio input[type="radio"] {
  cursor: pointer;
  width: 100%;
  height: 60px;
  opacity: 0;
}

.inline-radio input[type="text"] {
  font-size: inherit;
  color: #b6b6b6;
  margin-left: 0.3rem;
  display: flex;
  border: none;
  outline: none;
}

.inline-radio label {
  position: absolute;
  top: 0;
  left: 0;
  color: #b6b6b6;
  width: 100%;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  pointer-events: none;
}

.inline-radio input:checked+label {
  background: #d81b60;
  font-weight: 500;
  color: #fff;
}

<div class="inline-radio">
  <div><input class="donation def" type="radio" id="5" name="title"><label>$5</label></div>
  <div><input class="donation def" type="radio" id="25" name="title" checked><label>$25</label></div>
  <div><input class="donation def" type="radio" id="50" name="title"><label>$50</label></div>
  <div><input class="donation def" type="radio" id="100" name="title"><label>$100</label></div>
  <div><span>$</span><input id="other" class="donation" type="text" placeholder="Other Amount"></div>
</div>

You snippet is not working on keyup the OP wants the radio input to be unchecked in keyup. So I would recommend you have keyup instead of blur. Also the OP wants it jquery hence he added a tags if jquery and not JS. Thanks for the effort anyway. — Always Helping, Jun 20 '20 at 04:44
Simply change the event to `keyup` for the input class list eventlistener. Changed the snippit to reflect keyup on that event. — dale landry, Jun 20 '20 at 04:47
@dalelandry if I enter text, erase and then click a radio the input background gets stuck — Kyle Underhill, Jun 20 '20 at 23:05
Fixed by adding conditional `if (other.value !== '' && this.value || other.value === '' && this.value)` — dale landry, Jun 21 '20 at 08:02

Always Helping · Accepted Answer · 2020-06-20T04:03:42.133

You will require jQuery for this to accomplish.

Here you simple jQuery code for you. Just run snippet to see it in action.

onkeyup function any radio input checked will be set to disabled and unchecked.

.each() function which will set all the radio input to unchecked even if you select them again on keyup

$('#amount').keyup(function(){
  $('input:radio[name=title]').each(function () { 
    $(this).prop('checked', false); 
  });
})

*,
*::before,
*::after {
  box-sizing: border-box;
}

::-webkit-input-placeholder {
  color: #b6b6b6;
}

:-moz-placeholder {
  color: #b6b6b6;
  opacity: 1;
}

::-moz-placeholder {
  color: #b6b6b6;
  opacity: 1;
}

:-ms-input-placeholder {
  color: #b6b6b6;
}

::-ms-input-placeholder {
  color: #b6b6b6;
}

::placeholder {
  color: #b6b6b6;
}

body {
  background: #fff;
  width: 100%;
  margin: auto;
  padding: 30px;
  min-width: 320px;
  max-width: 540px;
  border-radius: 3px;
}

.inline-radio {
  font-size: 19px;
  display: -webkit-box;
  display: flex;
  border-radius: 3px;
}

.inline-radio div {
  border: 1px solid #ededed;
  margin-top: -1px;
  margin-left: -1px;
  position: relative;
  -webkit-box-flex: 1;
  flex: 1;
}

.inline-radio div:last-child {
  color: #b6b6b6;
  padding: 0 0.9rem;
  display: flex;
  align-items: center;
}

.inline-radio input[type="radio"] {
  cursor: pointer;
  width: 100%;
  height: 60px;
  opacity: 0;
}

.inline-radio input[type="text"] {
  font-size: inherit;
  color: #b6b6b6;
  margin-left: 0.3rem;
  display: flex;
  border: none;
  outline: none;
}

.inline-radio label {
  position: absolute;
  top: 0;
  left: 0;
  color: #b6b6b6;
  width: 100%;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  pointer-events: none;
}

.inline-radio input:checked+label {
  background: #d81b60;
  font-weight: 500;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inline-radio">
  <div><input type="radio" name="title"><label>$5</label></div>
  <div><input type="radio" name="title" checked><label>$25</label></div>
  <div><input type="radio" name="title"><label>$50</label></div>
  <div><input type="radio" name="title"><label>$100</label></div>
  <div><span>$</span><input type="text" id="amount" placeholder="Other Amount"></div>
</div>

Hope this helps.

What happens if the user selects the text field, fills out the value and then unselects the text and selects a default value again? — dale landry, Jun 20 '20 at 04:16
@dalelandry then all is good happy days. The user can continue if user wanta to check radio Inputs again it’s the user choice. — Always Helping, Jun 20 '20 at 04:41

Remove checked state of inline radio on keyup

2 Answers2