当单击列表之一时，如何更改复选框的样式，不活动的更改样式？

Question

如何在单击列表之一时更改复选框的样式，不活动的更改样式？当您单击复选框时，将发出sf-option-active类。别人如何更改CSS？

最初，所有元素都突出显示，当您单击一个复选框时，其他元素则变灰

<ul data-operator="or" class="list">
  <li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">
    <label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label></li>

  <li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="konveiri" name="_sft_tip[]" checked="checked" id="sf-input-868176859db7cbdd316babead1c4a6ca"><label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label></li>

  <li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa"><label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label></li>

  <li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0"><input class="sf-input-checkbox" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1"><label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label></li>
</ul>

1：

2：

Answer 1

您不需要任何JS。相反，您只能在CSS中说：

对于每个在复选框后的标签：将其设置为灰色（.moo + span）

对于每个已检查复选框之后的标签：将其涂成黑色（.moo:checked + span）

.moo + span {
  color: #AAA;
}
.moo:checked + span {
  color: #000;
}

<input type='radio' name="moo" class="moo"><span>1111</span><br/>
<input type='radio' name="moo" class="moo"><span>2222</span><br/>
<input type='radio' name="moo" class="moo"><span>3333</span><br/>
<input type='radio' name="moo" class="moo"><span>4444</span>

再加上一些代码，您可以将标签链接到复选框，并（为什么不）隐藏复选框：

.moo {
      visibility: hidden;
    }
    .moo + label {
      color: #AAA;
      cursor: pointer;
    }
    .moo:checked + label {
      color: #000;
    }

<div>
  <input type='radio' name="moo" id="c1" class="moo">
  <label for="c1">1111</label>
</div>
<div>
  <input type='radio' name="moo" id="c2" class="moo">
  <label for="c2">2222</label>
</div>
<div>
  <input type='radio' name="moo" id="c3" class="moo">
  <label for="c3">3333</label>
</div>
<div>
  <input type='radio' name="moo" id="c4" class="moo">
  <label for="c4">4444</label>
</div>

已更新为单选而不是复选框

Answer 2

单选按钮的问题是您无法删除选择。如果您不想使用单选按钮，则可以在此处使用带有复选框的此jquery小片段。

$(".sf-input-checkbox").on("click", (e) => {
  if(e.target.checked) {
    $(".sf-input-checkbox").not($(e.target)).prop('checked', false);;
    $(".sf-label-checkbox").not($(e.target).next()).addClass("dimmed");
    $(e.target).next().removeClass("dimmed");
  } else {
    $(".sf-label-checkbox").removeClass("dimmed");
  }
});

.dimmed {
  color: lightgray;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-operator="or" class="list">
  <li class="sf-level-0 sf-item-29" data-sf-count="19" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="tehobor" name="_sft_tip[]" id="sf-input-fc6224670cc95e4fdecf6cc456d08c36">
    <label class="sf-label-checkbox" for="sf-input-fc6224670cc95e4fdecf6cc456d08c36">Name1</label>
  </li>

  <li class="sf-level-0 sf-item-30 sf-option-active" data-sf-count="6" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="konveiri" name="_sft_tip[]" id="sf-input-868176859db7cbdd316babead1c4a6ca">
    <label class="sf-label-checkbox" for="sf-input-868176859db7cbdd316babead1c4a6ca">Name2</label>
  </li>

  <li class="sf-level-0 sf-item-31" data-sf-count="8" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="prolinii" name="_sft_tip[]" id="sf-input-080920625a50faa6f70e10891e88ebaa">
    <label class="sf-label-checkbox" for="sf-input-080920625a50faa6f70e10891e88ebaa">Name3</label>
  </li>

  <li class="sf-level-0 sf-item-32" data-sf-count="4" data-sf-depth="0">
    <input class="sf-input-checkbox hidden" type="checkbox" value="neitrobor" name="_sft_tip[]" id="sf-input-df092a05d0048b1297780b8683077cb1">
    <label class="sf-label-checkbox" for="sf-input-df092a05d0048b1297780b8683077cb1">Name4</label>
  </li>
</ul>

Answer 3

在发布代码之前尝试简化代码... 如果我理解正确，则您需要以下内容：

$(document).on('click','.moo',function(){ /*when you click the checkbox*/
      /*Firstly it turns the color of all elements, next to the checkboxes to black*/
      $('.moo').next().css('color','black'); 
      $('.moo:checked').next().css('color','red'); /*And next to all checked checkboxes - red*/
    });

span {font-size: 30px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='checkbox' class="moo"><span>1111</span><br/>
<input type='checkbox' class="moo"><span>2222</span><br/>
<input type='checkbox' class="moo"><span>3333</span><br/>
<input type='checkbox' class="moo"><span>4444</span>