如何使html中的单选框看起来像复选框，并在检查时使它们具有x的值？ [英] How can I make the radio boxes in html look like checkboxes and make them have x's when checked?

问题描述

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

  input [type =radio] {
 -webkit-appearance：复选框; / * Chrome，Safari，Opera * / 
 -moz-appearance：复选框; / * Firefox * / 
 -ms-appearance：复选框; / *目前不支持* / 
} 
  

当我使用这个解决方案时，在检查过之后，它会消失，并且它们被盘旋。

我也尝试了这里提供的解决方案：如何使用CSS设置复选框？
并且它们似乎不起作用。

有人可以帮我吗？

解决方案

也许这个解决方案会让你更容易。 / p>

我已经写了这个函数，所以你可以在任意数量的复选框上使用它。唯一的要求是给它们一个 radio 类，并为这组选项指定相同的名称。
$ b

jQuery解决方案

on（'change'，function（e））;（'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>眼睛< / h4>蓝色< input type =复选框name = eyesclass =radio>绿色<输入类型=复选框name =eyesclass =radio> Brown< input type =checkboxname =eyesclass =radio>< h4> Hair< / h4> Black< input type =checkboxname =hairclass =radio> ; Brown< input type =checkboxname =hairclass =radio> Ginger< input type =checkboxname =hairclass =radio>

b

纯Javascript解决方案

 < h4> Eyes< / h4> Blue< input type =checkboxname =eyesclass =radio> ;绿色<输入类型=复选框name =eyesclass =radio> Brown< input type =checkboxname =eyesclass =radio>< h4> Hair< / h4> Black< input type =checkboxname =hairclass =radio> ; Brown< input type =checkboxname =hairclass =radio> Ginger< input type =checkboxname =hairclass =radio>  

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

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

I want to make a form that has radio boxes that look like checkboxes. Furthermore I want them to have the glyphcon x's when checked. I tried several solutions for this including:

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

When I used this solution it made checkboxes with line across the checkbox that would disappear after one was checked and they were hovered over.

I also tried the solutions offered here: How to style checkbox using CSS? and they did not seem to work.

Can somebody please help me?

解决方案

Maybe this solution would make things easier for you.

I have written this function so you can use it on as many check boxes as you want. The only requirement it to give them a class of radio and the same name for that group of options.

jQuery Solution

$('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">

Pure Javascript Solution

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

If you have any question about the source code above please leave a comment below and I will get back to you as soon as possible.

I hope this helps. Happy coding!

这篇关于如何使html中的单选框看起来像复选框，并在检查时使它们具有x的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！