Question

设置复选框时，我通常会使用以下内容：

<input ....>
<label for="...">Lorem ipsum</label>

我使用样式标签::之前的标准方法来模拟我的复选框的样式，具体取决于是否已选中复选框：

input label{....}
input::checked label{....}

然而，Wordpress插件迫使我使用以下语法：

<label>....
    <input....>
</label>

由于CSS无法遍历DOM，我通常的纯CSS方法在这里不起作用。

还有其他建议吗？也许是jQuery？或者是否有一个我缺少的纯CSS解决方案？

Answer 1

AFAIK，你不能用CSS做，因为它不能遍历DOM（正如你自己提到的那样）。
遗憾的是label:checked也不起作用。

所以你正在寻找一个JS / jQuery解决方案：

$(function() {
  $(':checkbox').on('change', function() {
    $(this).closest('label').toggleClass('active', $(this).is(':checked') );
  });
});

label {
  border: 2px solid red;
}
.active {
  border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  <input type="checkbox" />
</label>

可能存在标签在输入之前的情况......然后我建议使用for属性，以确保标签与输入相关，然后代码应为：

$(function() {
  $(':checkbox').on('change', function() {
    $('label[for='+ $(this).attr('id') + ']' ).toggleClass('active', $(this).is(':checked') );
  });
});

label {
  border: 2px solid red;
}
.active {
  border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="idforcheckbox">This is the label</label>
<input id="idforcheckbox" type="checkbox" />

Answer 2

是的，你需要使用JS。 CSS无法处理父母。看看这个jQuery代码：

＆＃13;

$(document).on('click','input[type="checkbox"]',function() {
  if(!$(this).is(':checked')) {
    $(this).parent().removeClass('checked');
  } else {
    $(this).parent().addClass('checked');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="checkbox">
</label>

＆＃13;

如何设置嵌套在标签标签中的复选框的样式

2 个答案: