Question

我希望我的行的颜色在选择单选按钮时改变颜色。

我有2个单选按钮'标准'和'标准国际'。

当选择“标准”值时，我希望表格行改变颜色，但是当选中“标准国际”时，我希望“标准”表格行回到默认的白色。

以下是我的代码：

<div style="float:right; width:465px;" class="delivery-item">
  <table width="100%" border="0" cellspacing="15" cellpadding="15">
    <tr>
      <td>
        <input type="radio" name="[[+method.deliveryKey]]" value="[[+method.id]]" id="delivery-[[+method.id]]" [[+method.selected:notempty=`checked="checked"`]] />
        <label style="padding-left:10px; font-weight:bold;" for="delivery-[[+method.id]]">[[+method.title]]</label>
        <ul>
          <li style="padding-left:25px;" class="distribution">[[%simplecart.methods.yourcontribution? &price=`&#36; [[+method.price_add:scNumberFormatRev]]`]]</li>
        </ul>
      </td>
      <td width="25%"><li class="total" style="font-size:16px; font-weight:bold;">[[%simplecart.methods.total? &price=`Total &#36; [[+method.total:scNumberFormatRev]]`]]</li></td>
    </tr>
  </table>
</div>

Answer 1

我会做这样的事情。不需要脚本。

.optionOne:checked ~ #first ul, .optionOne:checked ~ #first, .optionTwo:checked ~ #second ul, .optionTwo:checked ~ #second {
background-color: red;
}

.optionTwo:checked ~ #second {
background-color: red;
}
#first, #second {
display: block;
width:100%;
height: 100%;

}

<div style="float:right; width:465px;" class="delivery-item">
  <table width="100%" border="0" cellspacing="15" cellpadding="15">
    <tr>
      <td>
        <input class="optionOne" type="radio" name="[[+method.deliveryKey]]" value="[[+method.id]]" id="delivery-[[+method.id]]" [[+method.selected:notempty=`checked="checked"`]] />
        <label id="first"  style="padding-left:10px; font-weight:bold;" for="delivery-[[+method.id]]">[[+method.title]] <ul>
          <li style="padding-left:25px;" class="distribution">[[%simplecart.methods.yourcontribution? &price=`&#36; [[+method.price_add:scNumberFormatRev]]`]]</li>
        </ul></label>
       
      </td>
      <td width="25%">
      <input class="optionTwo" type="radio" name="[[+method.deliveryKey]]" value="[[+method.id]]" id="otherOption" />
        <label  id="second"  for="otherOption" style="padding-left:10px; font-weight:bold;" for="delivery-[[+method.id]]">[[+method.title]]<ul>
        <li class="total" style="font-size:16px; font-weight:bold;">[[%simplecart.methods.total? &price=`Total &#36; [[+method.total:scNumberFormatRev]]`]]</li></ul></label></td>
    </tr>
  </table>
</div>

选择单选按钮时更改行背景颜色

1 个答案: