нажатие на 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>
     
    1. 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.
      1. 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.
        1. 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.