нажатие на radio button при клике по select

Discussion in 'PHP' started by GAiN, 6 Mar 2023.

  1. GAiN

    GAiN Elder - Старейшина

    Joined:
    2 Apr 2011
    Messages:
    2,550
    Likes Received:
    172
    Reputations:
    99
    Здравствуйте.
    Помогите подалуйста реализовать нажатие radio button при клике на select без использования JS с помощью css и html?
    структура:
    HTML:
    <label>
    <div id="block">
    <input type="radio">
    <select>
    <option">name</option>
    </select>
    </div>
    </label>
     
  2. Skofield

    Skofield Elder - Старейшина

    Joined:
    27 Aug 2008
    Messages:
    960
    Likes Received:
    392
    Reputations:
    58
    Думаю, без JS, средствами только CSS (стилизация элементов) и HTML (разметка элементов), изменять состояние других элементов документа при интерактивном взаимодействии пользователя с одними - не выйдет. JS ведь для этого и был придуман:
    HTML:
    <select onclick="document.querySelector('div#block input').checked = true">
     
    #2 Skofield, 6 Mar 2023
    Last edited: 7 Mar 2023
    GAiN and crlf like this.
  3. sherxan-g

    sherxan-g Member

    Joined:
    6 Jan 2016
    Messages:
    77
    Likes Received:
    18
    Reputations:
    0
    Единственный способ связать элементы разных типов без использования JavaScript это использование элементов формы, таких как label и input с типом checkbox. В этом случае, можно связать элементы с помощью атрибута for у элемента label и идентификатора элемента input.
    HTML:
    <style>
    #radioButton { display: none; }
    
    #radioButton:checked + #block select { /* стили для выбранного select */ }
    </style>
    <label for="radioButton">
      <div id="block">
        <input id="radioButton" type="radio">
        <select>
          <option>name</option>
        </select>
      </div>
    </label>
     
    GAiN likes this.
  4. Skofield

    Skofield Elder - Старейшина

    Joined:
    27 Aug 2008
    Messages:
    960
    Likes Received:
    392
    Reputations:
    58
    Вообще, думаю, дабы сконцентрировать больше входных данных по вопросу, действительно стоит отметить, что в CSS можно использовать так называемые псевдоклассы для стилизации элементов в зависимости от их состояния. И в частности использовать скрытые чекбоксы как альтернативу прослушивания события "click" в js (удобно для всякого рода всплывающих менюшек по нажатию на элемент, и с сочетанием свойства transition для плавной анимации).
    Но как ведь изменить состояние переключателя "<input type="radio">" на "checked" через псевдоклассы?! Ведь даже если повесить на элемент "option" псевдокласс ":checked", то максимум я смогу изменить только стилизацию у radio-переключателя. Хотя может в css и есть какие-то лайфхаки, с помощью которых можно добиться такого результата... Может даже с помощью тех же пре- постпроцессоров...
    В общем, я тут не претендую на исчерпывающую информацию в последней инстанции, и мне также было бы интересно, есть ли такие Гуру, которые овладели подобным Дзеном и смогут снизойти со своих высот, для пояснения истины нам - неискушенным неофитам.
     
    GAiN and CyberTro1n like this.