Question

我想在单击列表中的另一个按钮时取消选中单选按钮。（那就是无线电应该如何工作？）

这是我的代码：

<div class="row">
    <div class="col-sm-2">
        <label>Payment methods:</label>
        <input type="radio" name="pp" id="pp" checked>
        <label for="pp">
            <img src="../img/pp-icon.png">
            <div>Paypal</div>
        </label>
    </div>
    <div class="col-sm-2">
        <label style="visibility: hidden;">Payment methods:</label>
        <input type="radio" name="skrill" id="skrill">
        <label for="skrill">
            <img src="../img/skrill-icon.png">
            <div>Skrill</div>
        </label>
    </div>
</div>

CSS：

input[type=radio]{ /* HIDE RADIO */
    visibility: hidden; /* Makes input not-clickable */
    position: absolute; /* Remove input from document flow */
}
input[type=radio] + label>img{ /* IMAGE STYLES */
    border-radius: 50%;
    border: 1px solid #fff;
    padding: 20px;
    width: 100px;
    cursor: pointer;
    transition: 0.2s linear;
}
input[type=radio]:checked + label>img{ /* (RADIO CHECKED) IMAGE STYLES */
    background-color: rgba(255, 255, 255, 0.8);
}

问题演示：https://jsfiddle.net/gsda8s6r/（未隐藏单选按钮）

直播照片：

感谢您的帮助！

Answer 1

单选按钮必须具有相同的名称，您可以将图像放在标签标签内这里是更新小提琴https://jsfiddle.net/gsda8s6r/1/

<div class="col-sm-2">
        <label>
        <input type="radio" name="payment" id="pp" checked>
        <img style="max-height: 100px; width: auto;" src="http://www.aganis.it/siti-web-trento-blog/wp-content/uploads/2015/09/img-logo-paypal.png">
        <div>Paypal</div>
      </label>
    </div>
      <div class="col-sm-2">
        <label>
        <input type="radio" name="payment" id="skrill">
        <img style="max-height: 100px; width: auto;" src="https://content.skrill.com/fileadmin/content/images/business/global_coverage_icon.png">
        <div>Skrill</div>
        </label>
      </div>

Answer 2

检查这个小提琴：JSFiddle
我已经改变了你的一些CSS，但我认为你会得到这个伎俩正如其他人所说，单选按钮的名称应该相同。您需要使用以下CSS隐藏默认单选按钮。

input[type=radio].custom {
  display: none;
}

将“自定义”类添加到您的收音机输入标签中而已。这是一招！ ; - ）

单击其他单选按钮时，不取消选中作为图像的Radion按钮

2 个答案: