<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多选/全选/反选 取被勾选的id纯原生JavaScript代码 无需任何库整理后 可以直接拿来用的代码<input type='checkbox' name='cateid[]'> <
html中Select option原生JavaScript按照value值 或 按照文本 选择指定选项function select_value(id,value){//按照option的值来选择 selectdom=document.getElementById(id); option=sele
XMLHttprequeSt：原生JavaScript的aJax 发送GEt请求 和 poSt请求get请求function zhankai(id){/*函数:展开某个分类*/ var httpRequest = new XMLHttpRequest () ; httpRequest.open
html左右布局 原生JavaScript实现分割条 可拖动分隔条利用浮动+margin实现 左右布局 并用js实现可拖动分隔条 并用cookies记住宽度代码:<style> body{margin:0px;padding:0px;} .body{he
JavaScript conStructor 属性constructor 属性表示创建对象的函数。object.constructor必需的 object是对象或函数的名称。说明constructor 属性是所有具有 prototype 的对象的成员
JavaScript 解析JSon解析 遍历代码:obj=JSON.parse('{"id":"8","home":"beijing","uid&
array.pop()和 array.Shift()用法 JavaScript 数组删除成员方法:Array.pop() //移除数组中的最后一个元素并返回该元素。如果数组为空 则返回undefined Array.shift() //移除数组中的第一个元素并返回该元素例子:<scri
JavaScript array数组对象Array 对象所有属性:constructor 属性|length 属性|prototype 属性所有方法concat() 方法合并多个数组,返回一个新数组join() 方法将数组合并为字符串,用指
JavaScript 的prototype属性 可用于给对象添加新的自定义方法所有 JScript 固有对象都有只读的 prototype 属性。可以象该例中那样为原型添加功能，但该对象不能被赋予不同的原型。然而，用户定义的对象可以被赋给新的原型。本语言参考中每个内部对象的方法
JavaScript合并数组 :concat方法用法例子:<script> a = new Array(1,2,3); b = "JScript"; c = new Array(42, "VBScript&q