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

Question

I've a 3 way html/CSS/JavaScript toggle (radio buttons) set up here .

3 options: A / "X" / B Where "X" is none.

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>

Relevant bit of the 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');
      }
    }
  });
});

The JavaScript enables/disables .selected

When the page loads initially the X is visible. Only after the first clicks the X will then only appears if A or B has been clicked. If the X is clicked it disappears.

I'd like to set it so the X only appears when either A or B is clicked. even when the page loads.

Am I missing something on the CSS side or does this need to be solved with JavaScript?

Answer 1

You can just amend your html with this, adding the selected class to your label, making it in fact, invisible:

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

Answer 2

It is happening because of

    label.nostate.selected {
    background-color: white;
    color: white;

it sets color of text to white which is not visible as background in white. Change color of text or its background