代码如下:

<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全自定义单选框的更多相关文章

  1. 自定义单选框radio样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. CSS学习笔记三:自定义单选框,复选框,开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  3. vue.单选和多选,纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS魔法堂:改变单选框颜色就这么吹毛求疵!

    前言  是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用.若抛开input[type=radio] ...

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

    之前做项目的时候,也遇到过需要按照设计稿把<input type="checkbox">和<input type="radio">的默认 ...

  6. 关于如何用js完成全选反选框等内容

    在学习js过程中按照视频写了这个页面 可以在点上面全选/全不选时全部选中或者取消 在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整 功能比较完善 以下是代码 <!DOCTYPE h ...

  7. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  8. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  9. JS实现单选按钮回显时页面效果出现,但选中单选框的值为空

    最近做了很多前端页面的工作,遇到的一个感觉很头疼的问题在这里记一下: 经常用JS回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...

随机推荐

  1. JavaScript变量的作用域和函数的作用域的区别

    变量作用域和函数作用域都涉及到变量值的变化,本文旨在让大家明白他们之间的区别 变量的作用域: 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接 ...

  2. Linux企业集群用商用硬件和免费软件构建高可用集群PDF

    Linux企业集群:用商用硬件和免费软件构建高可用集群 目录: 译者序致谢前言绪论第一部分 集群资源 第1章 启动服务 第2章 处理数据包 第3章 编译内容 第二部分 高可用性 第4章 使用rsync ...

  3. No Launcher activity found!

    已经研究Android有几天了,刚开始写的代码说安装成功,但是在AVD没有显示.左看代码,右看代码,总是没找到错误, <application android:allowBackup=" ...

  4. C# EventHandler and Delegate(委托的使用)

    委托的声明 public delegate void MyDelegate(string str); 注 1.委托的定义和方法的定义类似,只是在前面加了一个delegate,但委托不是方法,它是一种特 ...

  5. Beta版本冲刺Day3

    会议讨论: 628:已经将原本写在jsp中的所有界面修饰代码转移到了css文件中,同时当页面跳转的时候也不会出现崩溃的现象,并且已经解决了上次无法连接数据库的问题.但是又遇到了一些新的小问题,希望明天 ...

  6. CSS选择器优先级排列

    CSS选择器的效率从高到低做了一个排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul & ...

  7. 修改placehosder

    CSS美化INPUT placeholder效果.CSS代码美化文本框里的placeholder文字. ::selection伪元素 简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3 ...

  8. 一步一步教你elasticsearch在windows下的安装

    首先下载最新的elasticsearch安装版本:elasticsearch下载.下载最新的elasticsearch 0.90.1版本.下载完成后.解压缩在安装目录.在cmd命令行进入安装目录,再进 ...

  9. Fiddler内置命令

    我猜你肯定忽略了下边这个小黑框: 虽然它不是很显眼,但用好它,会让你的工作效率提高 N 倍! 这跟喜欢 Linux 的朋友一样,肯定更倾向于用一两个命令代替鼠标不断的点点点操作. Fiddler 将每 ...

  10. python 进程间共享数据 (二)

    Python中进程间共享数据,除了基本的queue,pipe和value+array外,还提供了更高层次的封装.使用multiprocessing.Manager可以简单地使用这些高级接口. Mana ...