代码之家  ›  专栏  ›  技术社区  ›  user3574603

当表单中的所有复选框都被选中时,是否有一种方法可以检测到只使用CSS?

  •  0
  • user3574603  · 技术社区  · 6 年前

    我有以下表格:

    <form>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          One.
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
        <label class="form-check-label" for="defaultCheck2">
          Two.
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
        <label class="form-check-label" for="defaultCheck3">
          Three.
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
        <label class="form-check-label" for="defaultCheck4">
          Four.
        </label>
      </div>
    </form>
    

    我了解我可以使用以下内容来设置选中复选框的样式:

    .form-check-input:checked + label {
      color: blue
    }
    

    我有一个表单,它有不同数量的多个复选框。只有在表单中的所有复选框都被选中时,才能应用样式吗?

    我只想在CSS中执行此操作。

    1 回复  |  直到 6 年前
        1
  •  2
  •   MatTheCat    6 年前

    如果所有的复选框 required 你可以利用 :valid 窗体上的伪类以选择它或其任何子代。

    否则,正如@pete所说,目前没有办法做到这一点。