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事件,取值的时候用某种方法取 ...
随机推荐
- memcached安装配置
简述: memcached,开源的分布式缓存数据系统.高性能的NOSQL . Linux 一.环境配置与安装 01.编译准备环境 yum install -y gcc make cmake autoc ...
- android 圆角图片的实现
图片展示的时候总觉的直角的图片不好看?好办法来了!-- public class ToRoundCorner extends Activity{ public Bitmap toRoundCorner ...
- 【web端】百度地图api
百度地图js加载 页面引入: 修改申请的密钥:<script type="text/javascript" src="http://api.map.baidu.co ...
- SVN的简单使用
鼠标右键 SVNCheckout 导出文件 如果想在文件里做修改:右击鼠标-SVN Commit 如果想添加文件:把想要添加的文件粘贴到文件夹中,鼠标右击-TortoiseSVN-add 如果想在添加 ...
- [转]Spring的事务管理难点剖析(1):DAO和事务管理的牵绊
原文地址:http://stamen.iteye.com/blog/1441758 有些人很少使用Spring而不使用Spring事务管理器的应用,因此常常有人会问:是否用了Spring,就一定要用S ...
- Android 自定义Popupwindow 注意事项,手机和平板的区别
首先自定义ppw是要继承Popupwindow 的 而要成功的显示出自定义的ppw就必须实现下面的三句代码 // 必要的三要素下面,不然popWind显示不出来 this.setContentView ...
- ES6新特性:Function函数扩展, 扩展到看不懂
本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 函数的默认值: 如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数: aj ...
- eclipse-debug时直接进入/不进入/提示进入调试页面修改
eclipse使用debug调试程序时 默认设置每次程序走到断点位置时提示是否进入调试页面(如图) 而个人习惯有些系统直接进入调试页面.也有些人系统不进入调试页面调试 在这里勾选Remember my ...
- Servlet 工作原理解析
转自:http://www.ibm.com/developerworks/cn/java/j-lo-servlet/ Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 J ...
- 如何使用maven建一个web3.0的项目
使用eclipse手动建一个maven的web project可能会有版本不合适的情况,例如使用spring的websocket需要web3.0什么的,不全面的修改可能会出现各种红叉,甚是苦恼.我从我 ...