选中复选框时如何定位外部 Div

Question

我想在复选框被选中时定位 div。谁能告诉我如何在选中复选框时定位外部 div？

Answer 1

请注意此 jsFiddle 如何以非常简单的方式突出显示用法：

一个复选框被选中（选中）。
CSS 样式 :checked 捕获此事件并将 CSS 样式应用于 div 内容。

div 可以是您想要的另一个元素，只需确保您尝试使用代码并根据您的需要进行调整。如果您需要更多帮助，请告诉我们！

HTML

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label>

CSS

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
}

编辑：我想你想要参考 'how' CSS 在这里工作：

Answer 2

if($('.checkboxClassName').checked) {
    $(this).parent();
}

它会针对复选框在里面的parent div，如果tour target不在同一个parent里面，你可以使用更多的.parent() . 示例：如果您的代码是这样的：

    <div class="container">
      <div class="target"></div>
      <div class="parent">
        <div class="checkboxDiv">
            <input type="checkbox">
        </div>
      </div>
    </div>

并且您想定位 div.target 您需要这样的代码：

    if($('.checkboxClassName').checked) {
      $(this).parent().parent().parent().find(".target").css('background','magenta');
    } else { 
      $(this).parent().parent().parent().find(".target").css('background','cyan');
    }

那些 parent 将像这样工作：$(this).parent() = 目标 div.checkboxDiv

$(this).parent().parent() = 定位 div.parent

...

选中复选框时如何定位外部 Div

How to target an outer Div when checkbox is checked

html

css

checkbox