0

ラジオボタンを選択したときに、行の色を変更したいのですが。

「標準」と「標準国際」の2つのラジオボタンがあります。

'standard'値が選択されている場合、テーブル行の色を変更したいのですが、'standard international'がチェックされている場合、'standard'テーブル行をデフォルトの白色に戻したいです。

以下は私のコードです：

<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 に答える