0

Есть блок с radiobutton, у них есть data атрибуты. Как проверять, заполнен ли data атрибут, и первый элемент, у которого он заполнен, делать выбранным по умолчанию при загрузке страницы. Вот пример верстки:

<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
    <input class="radiobuttons__list-item" type="radio" name="radio">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>

То есть, например если мы имеем такой набор кнопок, быть выбранной тут должна быть 3 кнопка, так как она первая из тех, что удовлетворяет условию (имеет не пустой data атрибут example)

UPD:Таких блоков может быть несколько, и нужно в каждом находить первый подходящий элемент

<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
    <input class="radiobuttons__list-item" type="radio" name="radio">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>
<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio-2" data-example="test">
    <input class="radiobuttons__list-item" type="radio" name="radio-2">
</div>

3 ответа 3

3

Для одиночного блока можно сделать таким образом:

const elements = document.querySelectorAll('.radiobuttons__list-item');
const notEmptyElement = [...elements].find(element => !!element.getAttribute('data-example'));

notEmptyElement.setAttribute('checked', 'checked');

Если таких блоков на странице несколько - можно сделать так:

const wrappers = document.querySelectorAll('.radiobuttons__list');

const selectNoEmptyButton = wrapper => {
  const elements = wrapper.querySelectorAll('.radiobuttons__list-item');
  const notEmptyElement = [...elements].find(element => !!element.getAttribute('data-example'));

  notEmptyElement.setAttribute('checked', 'checked');
};

[...wrappers].forEach(wrapper => selectNoEmptyButton(wrapper));
5
  • 1
    спасибо! а если к примеру будет несколько блоков, содержащих такие кнопки, и нужно в каждом из них делать выбранным первый подходящий элемент? Дополнил вопрос
    – Arsenij
    13 фев 2020 в 12:43
  • 1
    @Arsenij я бы тогда выбирал все блоки, и для каждого запускал этот скрипт 13 фев 2020 в 14:16
  • а как это правильно записать?
    – Arsenij
    13 фев 2020 в 14:36
  • 1
    @Arsenij добавил реализацию 13 фев 2020 в 15:11
  • 1
    всё работает, благодарю!
    – Arsenij
    14 фев 2020 в 6:04
2

$('.radiobuttons__list-item').each(function(i,item){
  if(typeof $(this).attr('data-example') != 'undefined' && $(this).attr('data-example') != ''){
  $(this).prop('checked',true); 
  return false;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radiobuttons__list">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
    <input class="radiobuttons__list-item" type="radio" name="radio">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
    <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>

2

Ну или можно сделать так :

document.querySelector('.radiobuttons__list-item[data-example]:not([data-example=""])')
  .checked = true
<div class="radiobuttons__list">
  <input class="radiobuttons__list-item" type="radio" name="radio" data-example="">
  <input class="radiobuttons__list-item" type="radio" name="radio" checked>
  <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test1">
  <input class="radiobuttons__list-item" type="radio" name="radio" data-example="test2">
</div>

ПС: ответ дан просто для разнообразия :)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.