android 单选按钮对号,用“对号”和“叉号”代替单选框和复选框选中或未选中代码详解...
用“对号”和“叉号”代替单选框和复选框选中或未选中代码,使用javascript+css可以实现这样的操作!
效果如图:
/p>
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
/>
/>
/>
Free图库网-BIR - Boolean Input
Replacement Sample
crir = { init: function() { arrLabels = document.getElementsByTagName_r('label');
searchLabels: for (var i=0; i
{ // get the input element based on the for attribute of the label
tag if (arrLabels[i].getAttributeNode('for')
&&
arrLabels[i].getAttributeNode('for').value != '')
{ labelElementFor =
arrLabels[i].getAttributeNode('for').value; inputElement =
document.getElementByIdx_x_x(labelElementFor); } else { continue searchLabels; }
inputElementClass = inputElement.className;
// if the input is specified to be hidden intiate
it if (inputElementClass == 'crirHiddenJS')
{ inputElement.className = 'crirHidden';
inputElementType = inputElement.getAttributeNode('type').value;
// add the appropriate event listener to the input
element if (inputElementType == "checkbox") { inputElement.onclick =
crir.toggleCheckboxLabel; } else { inputElement.onclick =
crir.toggleRadioLabel; }
// set the initial label state if (inputElement.checked) { if (inputElementType == 'checkbox') { arrLabels[i].className =
'checkbox_checked'} else { arrLabels[i].className = 'radio_checked'
} } else { if (inputElementType == 'checkbox') { arrLabels[i].className =
'checkbox_unchecked'} else { arrLabels[i].className = 'radio_unchecked'
} } } else if (inputElement.nodeName != 'SELECT'
&&
inputElement.getAttributeNode('type').value == 'radio') { // this
so even if a radio is not hidden but belongs
to a group of hidden radios it will still
work. arrLabels[i].onclick =
crir.toggleRadioLabel; inputElement.onclick =
crir.toggleRadioLabel; } } },
findLabel: function (inputElementID) { arrLabels = document.getElementsByTagName_r('label');
searchLoop: for (var i=0; i
{ if (arrLabels[i].getAttributeNode('for')
&&
arrLabels[i].getAttributeNode('for').value == inputElementID)
{ return arrLabels[i]; break searchLoop; } } },
toggleCheckboxLabel: function () { labelElement =
crir.findLabel(this.getAttributeNode('id').value);
if(labelElement.className == 'checkbox_checked')
{ labelElement.className =
"checkbox_unchecked"; } else { labelElement.className =
"checkbox_checked"; } },
toggleRadioLabel: function () { clickedLabelElement =
crir.findLabel(this.getAttributeNode('id').value);
clickedInputElement = this; clickedInputElementName =
clickedInputElement.getAttributeNode('name').value;
arrInputs = document.getElementsByTagName_r('input');
// uncheck (label class) all radios in the same
group for (var i=0; i
{ inputElementType =
arrInputs[i].getAttributeNode('type').value; if (inputElementType == 'radio') { inputElementName =
arrInputs[i].getAttributeNode('name').value; inputElementClass =
arrInputs[i].className; // find radio buttons with the same 'name' as the one we've changed
and have a class of chkHidden // and then set them to unchecked if (inputElementName == clickedInputElementName
&& inputElementClass ==
'crirHidden') { inputElementID =
arrInputs[i].getAttributeNode('id').value; labelElement =
crir.findLabel(inputElementID); labelElement.className =
'radio_unchecked'; } } }
// if the radio clicked is hidden set the label to
checked if (clickedInputElement.className == 'crirHidden')
{ clickedLabelElement.className =
'radio_checked'; } },
addEvent: function(element, eventType, doFunction,
useCapture){ if (element.addEventListener) { element.addEventListener(eventType, doFunction,
useCapture); return true; } else if (element.attachEvent) { var r = element.attachEvent('on' + eventType,
doFunction); return r; } else { element['on' + eventType] = doFunction; } } }
crir.addEvent(window, 'load', crir.init, false);
class="code">
CRIR: Checkbox Radio Input
Replacement
method="get">
多选框
for="checkbox1">普通的.
type="checkbox" value="true"
/> This is the
Label
type="checkbox" value="true" class="crirHiddenJS"
/>
for="checkbox3">This is the Label with a long
name
type="checkbox" value="true" class="crirHiddenJS" checked="checked"
/>
for="checkbox4">This is the
Label
type="checkbox" value="true" class="crirHiddenJS"
/>
单选框
for="radio1">普通的。
value="true"
/> This is the
Label
value="true" class="crirHiddenJS"
/>
This is the Label
with a long
name
value="true" class="crirHiddenJS" checked="checked"
/>
for="radio4">This is the
Label
value="true" class="crirHiddenJS"
/>
android 单选按钮对号,用“对号”和“叉号”代替单选框和复选框选中或未选中代码详解...相关推荐
- Android界面编程之利用单选框和复选框实现对学历和爱好进行选择
Android界面编程之利用单选框和复选框实现对学历和爱好进行选择 首先我们要了解一下单选框和复选框: , 单选框(Radio Button):当用户选择某单选按钮时,同一组中的其他单选按钮不能同时选 ...
- Android(Kotlin)图片按钮,单选框,复选框(实验课)
Android的一次"实验课布置的内容" 里面有一些可以擦考的东西 所以借着CSDN来记个笔记 其实也没啥 第一次写 留个纪念 图片按钮,单选框,复选框(话不多说上代码) butt ...
- Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色,导致软件不能用。
Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色,导致软件不能用. 问题描述 解决办法 问题描述 1. Keil软件勾选框(复选框)不显示勾号,而是填充实心黑色 2.串口助手勾选框(复选框)不 ...
- WORD 2007 : 单选框, 复选框, 方框, 对号,在方框内打勾
貌似方法N多,从网上搜索整理三种方法: 方法一:插入复选框 1.点左上角的Office圆形按钮==〉Word/Excel选项===〉常用==〉勾选"在功能区显示[开发工具]选项卡" ...
- Android 中单选框或复选框点击其中一个,其余取消操作
利用setChecked(boolean flag)函数,当点击一个时,设置他为true,其余为false 为每个设置监听事件,利用view.getId()来抓取你想要的id, 代码如下所示: rad ...
- 单选按钮带文字_一分钟教会你用Word添加单选框和复选框
又到学习Word技巧的时候啦!学了这么长时间,你的技能点有没有增加呢?对表格的使用有没有更加熟练了?是否很好奇别人家的表格是怎么弄成可以单选框和复选框的效果呢~~~~下面让小编带你解锁新姿势~ 效果图 ...
- Android Studio App开发入门之选择按钮的讲解及使用(包括复选框,开关按钮,单选按钮,附源码)
运行有问题或需要图片资源请点赞关注收藏后评论区留言~~~ 在学习复选框之前,先了解一下CompoundButton,在Android体系中,CompoundButton类是抽象的复合按钮,因为是抽象类 ...
- android复选框标签,Android中的复选框的使用
复选框的使用和单选框是不同的对于单选框来说呢,是必须要分组的每一组内单选框只能有一个被选中,而对于复选框来说没有组这个概念,因为每一个都可同时被选中或者不被选中,复选框其实可以看成一个一般的按钮,只是 ...
- android复选按钮,Android的复选框的详细开发案例分析
在本教程中,我们将向您展示如何创建XML文件中的3个复选框,并论证了听者的使用检查–选中或取消选中复选框的状态. P.S这个项目是在Eclipse 3.7开发,并与Android 2.3.3测试. 1 ...
最新文章
- git本地项目代码上传至码云远程仓库总结
- linux内核链表分析
- 使用IDEA 提交代码到svn
- w7系统计算机e盘无法打开,Win7电脑磁盘打不开怎么办
- 2017年最新的全国省市sql数据
- 剑指offer:二叉树打印成多行(层次遍历)
- linux上c语言hdc句柄,控制台窗口的绘图
- 机器学习实战:基于概率论的分类方法:朴素贝叶斯(源码解析,错误分析)...
- C# struct 性能损失
- 天猫运动户外狂欢日来了!700多个大牌要如何回馈消费者
- 如何下载Mysql安装包?
- CPU指令集科普:CISC指令集和RISC指令集
- word自定义多级编号列表
- ssm使用注解配置多数据源
- Pandas Query 方法深度总结
- Ubuntu设置开机自启动
- 年终总结2019-2020
- 小白用户怎么才能让电脑换IP?
- ajax 提交list
- uni-icons中添加自定义图标
热门文章
- shell telnet进入发命令并退出
- matlab figure 视图最大化
- query和params传参的区别
- rainbow彩虹颜色表(灰度转RGB彩色/伪彩色)
- 热点文章如何采集(采集热点文章怎么写)
- 教育期刊《中学语文》征稿启示
- 算法导论第2章(3) 二分查找 binary search
- 希捷硬盘1T挂了(2)
- 腾讯云服务器信息,云服务器 - 腾讯云主机信息
- ubuntu下启动vlc报错“VLC is not supposed to be run as root“