<style>
td,table{border:1px solid #323841;}
</style>
<form method="get" action="">
<table>
<tr>
<td>测试一下</td>
<td>测试一下</td>
</tr>
<tr>
<td>测试</td>
<td><input class="kaiguan" name="kaiguan1" value="0"></td>
</tr>
<tr>
<td>测试</td>
<td><input class="kaiguan" name="kaiguan2" value="1"></td>
</tr>
<tr>
<td>测试</td>
<td><input class="kaiguan" name="kaiguan3" value="0"></td>
</tr>
<tr>
<td>测试</td>
<td><input class="kaiguan" name="kaiguan4" value="0"></td>
</tr>
<tr>
<td>测试</td>
<td><input class="kaiguan" name="kaiguan5" value="1"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
<script>
//需要开关按钮直接在页面写 <input class="kaiguan"> 就行了
inputArr=document.querySelectorAll("input[class='kaiguan']");
spanArr=new Array();
iArr=new Array();
for (i=0; i<inputArr.length; i++){
spanArr[i]=document.createElement('span');
spanArr[i].i=i;
spanArr[i].style="display:inline-block;outline: none;appearance: none;-webkit-appearance: none;-moz-appearance: none;position: relative;width: 50px;height: 25px;background: #ccc;border-radius: 15px;transition: border-color .3s, background-color.3s;cursor:pointer;";
inputArr[i].parentNode.appendChild(spanArr[i]);
iArr[i]=document.createElement('i');
iArr[i].style="display: inline-block;width:20px;height:20px;border-radius: 50%;background: #fff;box-shadow: 0, 0, 2px, #999;transition: .1s;top: 2px;position: absolute;left: 2px;";
spanArr[i].appendChild(iArr[i]);
spanArr[i].onclick=function(){
if(inputArr[this.i].value=="1"){
inputArr[this.i].value="0";
spanArr[this.i].style.background="#ccc";
iArr[this.i].style.left="2px";
}else{
inputArr[this.i].value="1";
iArr[this.i].style.left="55%";
spanArr[this.i].style.background="#3a6ea5";
}
}
//加载后立即显示
if(inputArr[i].value=="1"){
iArr[i].style.left="55%";
spanArr[i].style.background="#3a6ea5";
}else{
spanArr[i].style.background="#ccc";
iArr[i].style.left="2px";
}
inputArr[i].style.display="none";
}
</script>
</body>
</html>相关推荐
JavaScript原生JS实现html中checkbox复选框按Shift多选纯原生JavaScript代码 无需任何库整理后 可以直接拿来用的代码<input type='checkbox' name='cateid[]'> &l
原生JavaScript生成随机字母 JS取随机字符JavaScript取随机字母:方式有很多 我比较喜欢这一种 其中字符列表 和 要取的个数 改起来都比较方便<script> function 取随机字母(count){
原生JavaScript选择Select的option选项 选择指定的值JavaScript代码:function select(id,value){//select标签的id 和 要被选择的选项 obj=document.getElementById(id);opt
html复选框checkbox的使用, 未选中也是on的问题,原生JavaScript操作checkboxhtml代码:已改成html<label for="myCheckbox">点击我</label>JavaScript代码:document.getElem
html中Select option原生JavaScript按照value值 或 按照文本 选择指定选项function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=se
原生JavaScript获取指定的get请求参数值代码如下:function 取get参数值(key){ var url = location.search; str = url.match(/\\?(\\S*)/)[1]; //文本_取右边 ?
JavaScript 解析JSon解析 遍历obj=JSON.parse('{"id":"8","home":"beijing","uid&qu
chartJS实现柱状图/横向柱状图/曲线图/折线图/饼状图/环形图 分析图 JavaScriptchartjs最新版好像有些功能实现不了 不知道是不会用还是什么问题 所以只要用的旧版其中 Chart.js 版本为 v2.9.4 可以去网上搜索下载例子:<!doctype html>
JavaScript替换字符串 使用replace 替换字符串中的反斜杠JavaScript普通字符串替换把c替换成astr='abcd'; console.log(str); str=str.replace"c",&quo
JavaScript取随字母（指定长度且不重复）使用原生js生成n个不重复的随机字母方法<meta charset="UTF-8"> <script> function suijizimu(len){