Удалить отмеченное состояние встроенного радио при нажатии клавиши - PullRequest
Новая
       0

Удалить отмеченное состояние встроенного радио при нажатии клавиши

0 голосов
/ 20 июня 2020

В приведенном ниже фрагменте я смоделировал виджет пожертвования, однако, когда пользователь вводит текст в input type="text", я хочу, чтобы отмеченное радио потеряло свое отмеченное состояние. Есть ли решение CSS или для этого потребуется функция jQuery? 

*,
*::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>

Ответы [ 2 ]

2 голосов
/ 20 июня 2020

Вы можете использовать javascript с прослушивателем событий на blur ввода текстового поля. Я использовал class и id, установленные в текстовом поле id other и класс ввода donations. Обернул все в для l oop, чтобы перебирать входные данные, чтобы увидеть, на чем был сделан фокус, в случае, если пользователь отменяет выбор текста и выбирает значение по умолчанию после заполнения текстового поля. Затем запустите forEach l oop на входах, чтобы увидеть, какой из них установлен. Задайте условие, которое проверяет, установлено ли значение value.checked для этой итерации, и установите его в false, если это так.

Это гарантирует, что текст и значения по умолчанию никогда не могут быть установлены одновременно.

Второй прослушиватель событий, который запускает al oop со значениями по умолчанию, используя класс def, чтобы увидеть, установлено ли в текстовом поле значение, отличное от '' (пусто), и пользователь снова щелкает по умолчанию выбор для дарения. Если они вернутся к значению по умолчанию, сбросьте значение текстового поля до нуля. 

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>
1 голос
/ 20 июня 2020

Вам потребуется jQuery, чтобы выполнить sh.

Вот вам простой jQuery код. Просто запустите сниппет, чтобы увидеть его в действии.

onkeyup функция, любой отмеченный радиовход будет отключен и не отмечен.

.each () функция, которая установит все радиовходы на не установлен, даже если вы снова выберете их на 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>

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...