js初学—js全自定义单选框
代码如下:
<script type="text/javascript">
window.onload=function()
{
var oIput=document.getElementsByTagName('input');
var Obtn=document.getElementById('btn');
for(var i=;i<oIput.length;i++)
{
oIput[i].onclick=function()
{
for(var i=;i<oIput.length;i++)
{
oIput[i].checked=false;
}
this.checked=true;
}
}
btn.onclick=function()
{ alert('提交成功'); }
}
布局如下:
<p>1、这周星期天你干什么?</p>
<input type="radio" />看书
<input type="radio" />睡觉
<input type="radio" />吃饭
<input type="radio" />玩耍
<input type="radio" />洗衣服
<input type="radio" />听音乐</br>
<input type="button" value="提交" id="btn" />
总结:比较遗憾的是点击提交的时候没能选出后面的文字,比如:“提交成功,这周星期天你选择看书”!
js初学—js全自定义单选框的更多相关文章
- 自定义单选框radio样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS学习笔记三:自定义单选框,复选框,开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
- vue.单选和多选,纯css自定义单选框样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS魔法堂:改变单选框颜色就这么吹毛求疵!
前言 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用.若抛开input[type=radio] ...
- js自定义修改复选框单选框样式,清除复选框单选框默认样式
之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...
- 关于如何用js完成全选反选框等内容
在学习js过程中按照视频写了这个页面 可以在点上面全选/全不选时全部选中或者取消 在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整 功能比较完善 以下是代码 <!DOCTYPE h ...
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- 怎么用js代码改变单选框的选中状态
今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...
- JS实现单选按钮回显时页面效果出现,但选中单选框的值为空
最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...
随机推荐
- Dubbo_创建Dubbo服务并在ZooKeeper注册,然后通过Jar包执行
一.安装ZooKeeper(略) 二.创建Dubbo服务 1.DemoService 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- 【POJ 1113】Wall
http://poj.org/problem?id=1113 夏令营讲课时的求凸包例题,据说是PKUSC2015的一道题 我WA两次错在四舍五入上了(=゚ω゚)ノ #include<cmath& ...
- jQuery常用的元素查找方法总结
$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("di ...
- Ext-设置form表单不可编辑
1. var formEach = win.down('form').items.items; Ext.each(formEach,function(item){ console.log(item); ...
- ASP.NET MVC 扩展HtmlHelper类方法
1.扩展HtmlHelper类方法ShowPageNavigate 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- 【板子】gcd、exgcd、乘法逆元、快速幂、快速乘、筛素数、快速求逆元、组合数
1.gcd int gcd(int a,int b){ return b?gcd(b,a%b):a; } 2.扩展gcd )extend great common divisor ll exgcd(l ...
- 【C++实现python字符串函数库】二:字符串匹配函数startswith与endswith
[C++实现python字符串函数库]字符串匹配函数startswith与endswith 这两个函数用于匹配字符串的开头或末尾,判断是否包含另一个字符串,它们返回bool值.startswith() ...
- JQuery冲突问题,以及含有jquery的框架与jquery冲突
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- SQLServer日期格式化
0 或 100 (*) 默认值 mon dd yyyy hh:miAM(或 PM) 1 101 美国 mm/dd/yyyy ...
- app 摇一摇功能
1.重写canBecomeFirstResponder ,并返回YES -(BOOL)canBecomeFirstResponder{ return YES; } 2.重写UIResponder的三个 ...