根据单选按钮状态切换CSS类

Question

我正在开发一个更好的用户界面，并试图实现一种将单选按钮可视化的方法。我得到了下面的代码，这样就可以检查radio button input，并在单击颜色时添加类highlightedBox。

如何根据单选按钮状态来管理toggle类highlightedBox？现在，toggle在单击时被触发，但是如果用户通过选择另一种颜色决定取消选择颜色按钮，则此解决方案将无法工作。

我知道代码的当前状态只适用于每种颜色的单个更改。如果您想再次选择相同的颜色，则将不会设置选中的值。但这是另一个问题，我稍后会设法解决这个问题。

​

$('#wireColorSelect #wireBox').click(function(){
        var checkbox = $(this).parent().find(".cbox");
        var wireDOM = $(this).parent().find("#wireBox");
        checkbox.attr('checked', !checkbox.attr('checked'));
        wireDOM.toggleClass('highlightedBox');
    });

.wireBox{
    border: 1px solid;
    height:50px;
    width:50px;
    opacity: 0.5;
}

.white{
    background-color: White;
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.yellow{
    background-color: yellow;
}

.highlightedBox {
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wireColorSelect">
    <div class="flex-row flex-xs-3">
        <div class="flex-xs-3 no-padding">
            <div id="wireBox" class=" white wireBox"></div>
            <input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
        </div>
        <div class="flex-xs-3 no-padding">
            <div id="wireBox" class="red wireBox"></div>
            <input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
        </div>
        <div class="flex-xs-3 no-padding">
            <div id="wireBox" class="yellow wireBox"></div>
            <input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
        </div>
        <div class="flex-xs-3 no-padding">
            <div id="wireBox" class="blue wireBox"></div>
            <input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
        </div>
    </div>
</div>

​

Answer 1

您可以使用.not()排除当前用户和removeClass未单击的元素i..div。

演示代码：

​

$('#wireColorSelect .wireBox').click(function() {
  var checkbox = $(this).parent().find(".cbox");
  var wireDOM = $(this)
  checkbox.prop('checked', checkbox.is(":checked") ? false : true);
  wireDOM.toggleClass('highlightedBox');
  //remove checked from other checkboxes
  $(".cbox").not(checkbox).prop('checked', false);
  //remove highlight class from other
  $(".wireBox").not(wireDOM).removeClass("highlightedBox")
});

.wireBox {
  border: 1px solid;
  height: 50px;
  width: 50px;
  opacity: 0.5;
}

.white {
  background-color: White;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.highlightedBox {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wireColorSelect">
  <div class="flex-row flex-xs-3">
    <div class="flex-xs-3 no-padding">
      <div class=" white wireBox"></div>
      <input class="cbox" type="radio" id="whiteWireBox" name="wireBox" value="whiteWireBox" />
    </div>
    <div class="flex-xs-3 no-padding">
      <div class="red wireBox"></div>
      <input class="cbox" type="radio" id="redWireBox" name="wireBox" value="redWireBox" />
    </div>
    <div class="flex-xs-3 no-padding">
      <div class="yellow wireBox"></div>
      <input class="cbox" type="radio" id="yellowWireBox" name="wireBox" value="yellowWireBox" />
    </div>
    <div class="flex-xs-3 no-padding">
      <div class="blue wireBox"></div>
      <input class="cbox" type="radio" id="blueWireBox" name="wireBox" value="blueWireBox" />
    </div>
  </div>
</div>

​