0

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

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

When the 'standard' value is selected I want the table row to change color but when 'standard international' is checked I want the 'standard' table row to go back to the default white color.

下面是我的代码：

<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>
4

1 回答 1

0

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

.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>

于 2020-01-16T13:13:03.753 回答