Question

我想制作一个带有看似复选框的收音机盒的表单。此外，我希望他们在检查时拥有glyphcon x＆＃39; s。我为此尝试了几种解决方案，包括：

        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? 他们似乎没有工作。

有人可以帮帮我吗？

Answer 1

也许这个解决方案可以让你更轻松。

我已编写此功能，因此您可以根据需要在任意数量的复选框中使用它。唯一要求它为它们提供radio类，并为该组选项提供相同的名称。

jQuery解决方案

＆＃13;

$('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;
});

＆＃13;

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

＆＃13;

纯Javascript解决方案

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

如何使html中的单选框看起来像复选框，并在选中时使它们具有x＆＃39; s？

1 个答案: