Question

我有两个自定义单选按钮，单击时被添加了一个自定义的勾号[tick]，但是当我单击第二个按钮时，第一个单选按钮仍处于选中状态。

这是jsfiddle：http://jsfiddle.net/03vwco7r/

这是html：

<p class="payment_module">
    <input id="session1" name="radio-group" type="radio" />
    <label for="session1">
      <img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
        Zapłać przelewem&nbsp;<span>(czas przetwarzania zamówienia będzie dłuższy)</span>
  </label>
</p>


    <p class="payment_module">
        <input id="session1" name="radio-group" type="radio" />
            <label for="session1">
                <img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
            <a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
                {l s='Pay with PayU' mod='payu'}
            </a>
        </label>
    </p>

这是CSS

input[type="radio"] {
  display: none;
}
input[type="radio"] + label {
  display: inline-block;
  cursor: pointer;
}
input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  position: relative;
  border: 1px solid #000;
  border-radius:50px;
  width: 60px;
  height: 60px;
  margin:0;
}
input[type="radio"]:checked + label:before {
  content: "✔";
  font-family: 'lucida grande';
  font-size: 45px;
  line-height: 60px;
  text-align: center;
}

我希望在用户单击第二个按钮时自动取消选中第一个按钮，

我的代码在做什么错了？

Answer 1

由于它们具有相同的“ id”和“ for”，因此您应该以第二种无线电样式更改“ id”和“ for”：

<p class="payment_module">
    <input id="session1" name="radio-group" type="radio" />
    <label for="session1">
      <img src="https://picsum.photos/86/49/?random" alt="Zapłać przelewem" width="86" height="49">
        Zapłać przelewem&nbsp;<span>(czas przetwarzania zamówienia będzie dłuższy)</span>
  </label>
</p>


    <p class="payment_module">
        <input id="session2" name="radio-group" type="radio" />
            <label for="session2">
                <img src="{$image|escape:'htmlall':'UTF-8'}" alt="{l s='Pay with PayU' mod='payu'}" />
            <a class="payu" href="{$actionUrl|escape:'htmlall':'UTF-8'}" title="{l s='Pay with PayU' mod='payu'}">
                {l s='Pay with PayU' mod='payu'}
            </a>
        </label>
    </p>

session1 ===> session2

为什么在单击另一个单选按钮后仍不取消选中自定义收音机？

1 个答案: