javascript - 自定义单选按钮和复选框

Question

我正在尝试将自定义图像用于复选框和单选按钮。到目前为止，我已经找到了一个css/javascript解决方案、20 个插件的各种列表或 JQuery UI。由于很多解决方案都是几年前的，而且很多插件看起来已经死了，现在有没有解决方案，或者仍然有很多分散的方法？

Answer 1

我猜你想要一个更好的方法，那就是 jQuery：

HTML

<!-- Style these: -->
<a class="radio" id="radio1" onclick="radio('1');">something cool</a>
<a class="radio" id="radio2" onclick="radio('2');">radio2 (or checkbox)</a>
<a class="radio" id="radio3" onclick="radio('3');">radio3 (or checkbox)</a>

<input id="radionumber" type="hidden" value="0" />

Javascript

function radio(n) {
   $('#radio'+n).click();
   $('.radio').removeClass('selectedRadio');
   $(this).addClass('selectedRadio');
   $('#radionumber').val( $(this).attr('id').substring(5); );
}

Answer 2

http://uniformjs.com/有一组漂亮的表单元素，并且除了 ie6 之外都与浏览器兼容。

Answer 3

几乎所有你想要的表单元素，然后是一些：https ://github.com/jquery/jquery-ui

Answer 4

这是我为帮助像你这样的人而做的事情：

单选按钮：

window.onload = function() {
  var radioButtonGroups = document.getElementsByClassName('radioGroupContainer');
  for (var i = 0; i != radioButtonGroups.length; i++) {
    var radioButtons = radioButtonGroups[i].getElementsByClassName('radioButtonContainer');
    for (var i = 0; i != radioButtons.length; i++) {
      radioButtons[i].onclick = function() {
        var value = this.children[0].getAttribute('name');
        for (var i = 0; i != radioButtons.length; i++) {
          radioButtons[i].children[0].setAttribute('class', 'radioButtonDot');
        }
        this.children[0].setAttribute('class', 'radioButtonDotActive');
        this.parentNode.setAttribute('name', value);
      };
    }
  }
};

/*
* Created by William Green.
* Questions or comments? Email william.green@protonmail.com
* I would appreciate credit for this code if you use it; but it is not required.
* Last updated July 26, 2015
* Created July 26, 2015
*
*/

.radioButtonContainer {
  background-color: #eee;
  padding: 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: table;
  margin-top: 5px;
  margin-bottom: 5px;
}
.radioButtonContainer .radioButtonDot {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.radioButtonContainer .radioButtonDotActive {
  width: 16px;
  height: 16px;
  background-color: #1396DE;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.radioButtonContainer .radioButtonLabel {
  background-color: transparent;
  display: inline-block;
  vertidal-align: middle;
  border: 0;
}

<div class="radioGroupContainer" id="radioChoicesOne">
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionOne"></div>
    <input type="button" class="radioButtonLabel" value="Option One">
  </div>
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionTwo"></div>
    <input type="button" class="radioButtonLabel" value="Option Two">
  </div>
  <div class="radioButtonContainer">
    <div class="radioButtonDot" name="optionThree"></div>
    <input type="button" class="radioButtonLabel" value="Option Three">
  </div>
</div>

<div id="radioButtonGroupOneValue"></div>
<input type="button" value="Get radio button value..." onclick="document.getElementById('radioButtonGroupOneValue').innerHTML = document.getElementById('radioChoicesOne').getAttribute('name');">

复选框：

window.onload = function() {
  var checkboxes = document.getElementsByClassName('checkbox');
  for (var i = 0; i != checkboxes.length; i++) {
    if (checkboxes[i].hasAttribute('name') == false) {
      checkboxes[i].setAttribute('name', 'notChecked');
    } else {
      if (checkboxes[i].getAttribute('name') == 'checked') {
        checkboxes[i].setAttribute('name', 'checked');
        checkboxes[i].children[0].className = 'checkboxDotActive';
      }
    }

    checkboxes[i].onclick = function() {
      if (this.getAttribute('name') == 'checked') {
        this.setAttribute('name', 'notChecked');
        this.children[0].className = 'checkboxDot';
      } else {
        this.setAttribute('name', 'checked');
        this.children[0].className = 'checkboxDotActive';
      }
    };
  }
};

/*
* Questions or comments? Please email william.green@protonmail.com
* Credit for this project goes to William Green (me).
* Created July 25, 2015
* Last updated July 25, 2015
* I would like appropriate credit for this code, although it is not required.
*
* Thank you for looking, hope you find it useful.
* Please come back, since I may be adding more features to the code to allow for advanced functionality.
*
* PLEASE NOTE THAT THE 'checkboxDot' DIV MUST COME BEFORE ANY OTHER INNER MARKUP.
* IT MUST COME IMMEDIATELY AFTER THE PARENT DIV! IT WILL NOT WORK OTHERWISE!!!
*
* Thank you for showing interest in this code!
*/

/*IMPORTANT STYLES... THE STYLES LATER ARE NOT DIRECTLY RELATED THE THE CHECKBOXES*/

.checkbox {
  background-color: #eee;
  border-radius: 3px;
  padding: 5px;
  display: table;
}
.checkbox input {
  outline: none;
  border: 0;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
}
.checkbox .checkboxDot {
  background-color: transparent;
  border: 1px solid #000;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
.checkbox .checkboxDotActive {
  background-color: #01A1DB;
  border: 1px solid transparent;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  -o-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
}
/*END IMPORTANT STYLES*/

/*START IRRELEVANT STYLES*/

.valueButton {
  margin-top: 10px;
}
/*END IRRELEVANT STYLES*/

<h1>Javascript, html, and css checkboes -- best browser support ever!</h1>


<h3>Normal checkbox</h3>

<div id="checkboxOne" class="checkbox">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 1">
</div>
<div id="checkboxOneStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById('checkboxOneStatus').innerHTML = document.getElementById('checkboxOne').getAttribute('name');" value="Is it checked?">

<h3>Checked by default</h3> 
<div id="checkboxTwo" class="checkbox" name="checked">
  <div class="checkboxDot"></div>
  <input type="button" value="Item 2">
</div>
<div id="checkboxTwoStatus"></div>
<input type="button" class="valueButton" onclick="document.getElementById('checkboxTwoStatus').innerHTML = document.getElementById('checkboxTwo').getAttribute('name');" value="Is it checked?">