模拟单选框

<!--<div class="list">
&lt;!&ndash;<input type="radio" id="student" name="role" class="uncheck">

<span class="vir-check"></span>
<label for="student">学生</label>&ndash;&gt;

<span class="vir-check uncheck" id="student"></span><label for="student">学生</label>
</div>
&lt;!&ndash;专家登录&ndash;&gt;
<div class="list">

&lt;!&ndash;<input type="radio" id="speciallist" name="role" class="check">
<span class="vir-check"></span>
<label for="speciallist">专家</label>&ndash;&gt;

<span class="vir-check uncheck" id="speciallist"></span><label for="speciallist">专家</label>
</div>
&lt;!&ndash;学校登录&ndash;&gt;
<div class="list">
&lt;!&ndash;<input type="radio" id="school" name="role">

<span class="vir-check"><b>√</b></span>
<label for="school">学校</label>&ndash;&gt;
<span class="vir-check uncheck" id="school"></span><label for="school">学校</label>

</div>-->

<script type="text/javascript">
/*登录控制*/
var checks = document.getElementsByClassName(‘vir-check‘);
var len = checks.length;
var panel = document.getElementsByTagName(‘label‘);
var form = document.getElementsByTagName(‘form‘)[0];
var button = document.getElementById(‘login‘);
var action1 = ‘index.html‘;
var action2 = ‘login.html‘;
var action3 = ‘register.html‘;

for(var j = 0;j<len;j++){

checks[j].onclick = function(){

if (this.innerHTML==""){

//去掉其他项的勾选
for(var h =0 ; h<len;h++){

checks[h].innerHTML = "";
}
//把本项目的设为勾选
this.innerHTML = "√";
}
}
}

for(var k = 0;k < len;k++){

panel[k].onclick =function(){

if (this.previousElementSibling.innerHTML == ""){

//置空所有
for(var l = 0; l<len ;l++){
checks[l].innerHTML = "";
}

//选择相关项
this.previousElementSibling.innerHTML = "√";

/*修改跳转路径*/
}
}
}

button.onclick = function(){

for(var f = 0;f<len;f++){
if(checks[f].innerHTML==‘√‘){

if(f==0){
form.setAttribute(‘action‘,action1);
}else if(f==1){
form.setAttribute(‘action‘,action2);
}else{
form.setAttribute(‘action‘,action3);
}
form.submit();
}
}
/*
switch(f){
case 0:

form.submit();
break;

case 1:

form.submit();
break;

case 2:

break;
default:
console.log("没有弄对");
}*/

}

</script>

模拟单选框,布布扣,bubuko.com

时间: 2024-10-23 09:31:03

模拟单选框的相关文章

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

checbox复选框实现radio单选框的单选功能

checbox复选框实现radio单选框的单选功能:大家知道复选框可以一次选中多个,单选按钮每次只能够选中其中的一个,但是单选按钮比较霸道,你选中以后,只能够且必须选中其中一个,所有下面就通过checkbox复选框模拟实现单选按钮的功能,但是能够取消选中的项.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author"

js自定义修改复选框单选框样式,清除复选框单选框默认样式

之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认样式进行修改,但发现,并没有可以重置效果的方法,之前用过-webkit-appearance的方法,但是这个只在webkit内核的浏览器里面生效,火狐不生效. 所以自己写了个js,用li来模拟复选框和单选框的效果,很简单,7行就行. 效果图:  涉及到的知识点:自定义属性来存储点击状态和原来的class名 h

学习15 单选框/多选框标签

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>单选框/复选框</title> </head> <body> <form action="save.php" method="p

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

单选框与复选框的实现

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.hanqi.test5"> <application android:allowBackup="true" android:icon=&q

jquery获取表格中动态单元格内单选框和多选框的值

1.通过table的Id获取到每行(tr)的元素, $("#table_xuan tr") 如果过滤第一行和最后一行 $("#table_xuan tr:not(:first):not(:last)") 2.通过 each()函数遍历 每一行 $("#table_xuan tr").each(function(i)){ // i 代表的是行数 $(this).children("td").each(function(j)){

android 单选框和复选框

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_heig

android开发入门之单选框的基本应用

随着android手机越来越火,android操作系统也深受开发者的喜爱,很多程序员慢慢转行做android开发.今天麦子学院的android开发老师给大家讲讲android单选框基本应用,今天我们跟着麦子学院android老师学习Android单选框的实现方式. ●使用Android单选框的时候,要用RadioGroup来分组 ●选择RadioGroup里的单选框的时候,将调用RadioGroup的Check·()方法 ●追加单选框被选择时处理的时候, 1.调用setOnCheckedChan