Javascript：如何在带有 <input type=radio> 的 jss 中使用相邻的兄弟选择器 // 单击时更改颜色

问题描述

我试图在单击 jss 中的单选按钮时更改标签的颜色。 这是我到目前为止在 Form.jsx 中的内容：

<section className={classes.buttons} data-toggle="buttons">
  <label className={classes.btn}>
    <input type="radio" name="options" id="option1" checked/>
    <span>9th grade</span>
  </label>
  <label className={classes.btn}>
    <input type="radio" name="options" id="option2"/> <span>10th grade</span>
  </label>
  <label className={classes.btn}>
    <input type="radio" name="options" id="option3"/> <span>11th grade</span>
  </label>
  <label className={classes.btn}>
    <input type="radio" name="options" id="option4"/> <span>12th grade</span>
  </label>
</section>

在我的 formStyles.js 文件中，

    buttons : {
        display: 'grid',gridGap: '50px',gridTemplateColumns: 'auto auto',background: 'rgba(255,255,0.25)',padding: '30px',margin: '30px 100px 10px 100px',zIndex: '1',"& input[type = radio]": {
            opacity: '0',position: 'fixed',width: '0',"&:checked &span"  : {
            display: 'none',color: 'blue',fontSize: '30px',},"& label": {
            backgroundColor: '#BC98EE',zIndex: '2',color: 'white',

它仅在我执行“&:checked”时有效，但在我添加“&span”时无效。事实上，当我添加“&span”时，它不会在“&:checked &span”下运行任何东西。有什么建议吗？

解决方法

span 是已检查输入的兄弟，而不是后代。

参见： Adjacent Sibling Combinator

.buttons {
  padding: 30px;
}

.buttons input:checked+span {
  color: blue;
}

<section class="buttons">
  <label>
      <input type="radio" name="options" id="option1" checked />
      <span>9th grade</span>
  </label>
  <label>
      <input type="radio" name="options" id="option2">
      <span>10th grade</span>
  </label>
  <label>
      <input type="radio" name="options" id="option3"/>
      <span>11th grade</span>
  </label>
  <label>
      <input type="radio" name="options" id="option4" />
      <span>12th grade</span>
  </label>
</section>