javascript - 通过使用 CSS/HTML/JavaScript 选择 A 或 C 来更改 B 的状态

Question

我设置了 3 种 html/CSS/JavaScript 切换(单选按钮)here .

3 个选项:A/"X"/B 其中“X”为无。

HTML

<div class="ABSelector">  
    <label class="Astate">
    A
    <input name="state" type="radio" value="A" />
    </label>

    <label class="nostate">
    x
    <input name="state" type="radio" value="" checked />
    </label>

    <label class="Bstate">
    B
    <input name="state" type="radio" value="B" />
    </label>

</div>

CSS 的相关部分

label {
    cursor: pointer;
    display: block;
    float: left;
    width:40px;
    height:40px;
    //background-color:green;
    line-height:40px;
    text-align:center;

}
label.Astate.selected {
    background-color:indianred;
    color: white;
    border-top-left-radius:10px;  
    border-bottom-left-radius:10px;
}
label.Astate.selected .nostate{
    color:grey;
}
label.Bstate.selected {
    background-color:orange;
    color: white;
    border-top-right-radius:10px;  
    border-bottom-right-radius:10px;
}
label.nostate.selected {
    background-color:white;
    color: white;
}

Javascript

window.addEvent('domready', function() {
  $$('input').set({
    events: {
      change: function(el) {
        $$('label').removeClass('selected');
        this.getParent('label').addClass('selected');
      }
    }
  });
});

JavaScript 启用/禁用 .selected

当页面最初加载时，X 是可见的。只有在第一次点击后，X 才会在点击 A 或 B 时出现。如果单击 X，它就会消失。

我想将其设置为仅在单击 A 或 B 时才显示 X。即使在页面加载时。

我是否遗漏了 CSS 方面的某些内容，或者这是否需要使用 JavaScript 来解决？

Answer 1

你可以用这个修改你的 html，将选定的类添加到你的标签中，使其实际上不可见:

<label class="nostate selected">
x
<input name="state" type="radio" value="" checked />
</label>