如何使 html 中的单选框看起来像复选框，并在选中时使它们具有 x？答案

【问题标题】：How can I make the radio boxes in html look like checkboxes and make them have x's when checked?如何使 html 中的单选框看起来像复选框，并在选中时使它们具有 x？
【发布时间】：2017-08-16 18:39:57
【问题描述】：

我想制作一个带有看起来像复选框的单选框的表单。此外，我希望他们在检查时拥有 glyphcon x。我为此尝试了几种解决方案，包括：

        input[type="radio"] {
            -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
            -moz-appearance: checkbox;    /* Firefox */
            -ms-appearance: checkbox;     /* not currently supported */
        }

当我使用此解决方案时，它会在复选框上制作带有横线的复选框，在选中一个复选框并将其悬停在上方时会消失。

我也尝试了这里提供的解决方案：How to style checkbox using CSS? 他们似乎没有工作。

有人可以帮帮我吗？

【问题讨论】：

您确定要这样做吗？人们有直观的期望，将外观映射到行为。对开发人员来说似乎无害的事情往往会让用户感到困惑。
为什么要使用收音机而不是支票？
@majidrazvi 是的，我确定我想这样做。
@MarcoSalerno 我想使用收音机而不是支票，因为我只想让用户选择一个选项。
那么为什么不构建一个只允许一个选择的javascript函数呢？您可以修改此解决方案 stackoverflow.com/questions/41626277/… 来做到这一点。

标签： javascript jquery html checkbox radio-button

【解决方案1】：

也许这个解决方案会让你的事情变得更容易。

我已经编写了这个函数，因此您可以在任意数量的复选框上使用它。唯一的要求是给他们一个radio 的类和该组选项的相同名称。

jQuery 解决方案

$('input[type=checkbox][class=radio]').on('change', function(e) {
  var Group = this.name;
  $('input[type=checkbox][name=' + Group + '][class=radio]').prop('checked', false);
  this.checked = true;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Eyes</h4>
Blue <input type="checkbox" name="eyes" class="radio"> 
Green <input type="checkbox" name="eyes" class="radio"> 
Brown <input type="checkbox" name="eyes" class="radio">
<h4>Hair</h4>
Black <input type="checkbox" name="hair" class="radio"> 
Brown <input type="checkbox" name="hair" class="radio"> 
Ginger <input type="checkbox" name="hair" class="radio">

纯 Javascript 解决方案

var checks = document.getElementsByClassName('radio');
for (var i = 0; i < checks.length; i++) {
  checks[i].addEventListener('change', radios, false);
}

function radios() {
  var x = document.querySelectorAll("input[name=" + this.name + "]");
  for (var i = 0; i < x.length; i++) {
    x[i].checked = false
  }
  this.checked = true;
}

<h4>Eyes</h4>
Blue <input type="checkbox" name="eyes" class="radio"> 
Green <input type="checkbox" name="eyes" class="radio"> 
Brown <input type="checkbox" name="eyes" class="radio">
<h4>Hair</h4>
Black <input type="checkbox" name="hair" class="radio"> 
Brown <input type="checkbox" name="hair" class="radio"> 
Ginger <input type="checkbox" name="hair" class="radio">

如果您对以上源代码有任何疑问，请在下方留言，我会尽快回复您。

我希望这会有所帮助。快乐编码！

【讨论】：