javascript - 如何根据相邻div中选中的输入框选择一个div

Question

鉴于下面的代码段，是否有一种方法可以编写一个 CSS 选择器，该选择器以 class="item_text" 的 div 为目标，前提是选中了该复选框？

<div class="row">
  <div class="col-xs-1">
    <input name="item_checkbox" type="checkbox" />
  </div>

  <div class="col-xs-11">
    <div class="item_text" contenteditable="true">
      To rearrange your list, drag and drop items
    </div>
  </div>
</div>

Answer 1

如评论中所述，不可能仅在 CSS 中执行此操作，因为 CSS 规则无法遍历 DOM。

当您使用 jQuery 标记问题时，您可以使用它来在复选框状态更改时影响所需的元素。试试这个:

$('.row :checkbox').change(function() {
  $(this).closest('.row').find('.item_text').toggleClass('foo', this.checked);
});

.foo { border: 1px solid #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-1">
    <input name="item_checkbox" type="checkbox" />
  </div>

  <div class="col-xs-11">
    <div class="item_text" contenteditable="true">
      To rearrange your list, drag and drop items
    </div>
  </div>
</div>