自定义单选按钮和复选框
custom radio buttons and checkboxes
我正在尝试为复选框和单选按钮使用自定义图像。到目前为止,我已经找到了一个css/javascript解决方案,20个插件的各种列表或JQuery UI。由于很多解决方案都是几年前的,而且许多插件看起来已经死了,所以在这一点上是否有任何解决方案,或者仍然有很多分散的方法?
我想你想要一个更好的方法,那就是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" />
爪哇语
function radio(n) {
$('#radio'+n).click();
$('.radio').removeClass('selectedRadio');
$(this).addClass('selectedRadio');
$('#radionumber').val( $(this).attr('id').substring(5); );
}
几乎所有你想要的表单元素,然后是一些: https://github.com/jquery/jquery-ui
http://uniformjs.com/有一套相当不错的漂亮表单元素,并且除了IE6之外与浏览器兼容。
以下是我为帮助像你这样的人而做的东西:
单选按钮:
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?">
相关文章:
- 复选框/单选按钮-添加所选项目的总价
- 将文本框/单选按钮/和下拉列表中的信息添加到dataTable
- 如何防止jQuery中复选框单击时执行多个代码
- 如果用户未选中复选框或选择按钮,如何为复选框或单选按钮设置一些默认值
- 如何在更改节点 JS 表中的复选框时禁用按钮
- 如何使用 rails3-jquery-autocomplete 更新复选框/单选按钮
- IE issue-使用复选框/单选按钮时,jQuery.change()不会触发回调
- 引导复选框/单选按钮不改变<输入>价值
- 在复选框单击中,更改可以单击的按钮
- 样式复选框&单选按钮
- 启用两个提交按钮上的复选框单击
- jQuery缓存刷新复选框单选按钮状态
- 基于复选框单选按钮调整总成本标价
- 自定义复选框/单选按钮,不用ID和FOR,也不用angular.js
- 单击复选框以禁用按钮
- 表单提交的复选框:点击按钮时显示错误
- 我如何有一个复选框/单选按钮张贴到一个文本区,当我点击提交按钮
- 如果我们在鼠标下移时设置preventDefault,然后双击文档,那么它就会阻止复选框/单选标签的默认行为
- Ipad复选框/单选按钮操作缓慢
- 如何在 JavaScript 中创建带有 3 个复选框/单选按钮作为选项的提示