代码如下:

<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. AngularJS引入Echarts的Demo

    最近要用到图表展示,想了想,还是首选Echarts,HighCharts和D3.js备用吧, 而项目中也用到了AngularJS,所以需要把Echarts引入到AngularJs中一起使用, 试了试, ...

  2. 【Zeyphr】分页查询与修改

    分页查询: return this.GetDynamicListWithPaging(ParamQuery.Instance() .From("P_Resume") .AndWhe ...

  3. MVC视图引擎优化

    请首先看如下内容: 未找到视图"Index"或其母版视图,或没有视图引擎支持搜索的位置.搜索了以下位置: ~/Views/Home/Index.aspx~/Views/Home/I ...

  4. java之自定义回调接口

    本质上为:传递不同的实现的接口实例,执行不同的程序,即有扩展性. 在一个方法中,可以实现一个对象中的接口,实例化该接口,即可完成对不同对象的不同回掉. 在原有类中,调用接口中的方法,根据不同的接口实例 ...

  5. [转]SSM框架——详细整合教程(Spring+SpringMVC+MyBatis)

    原文地址:http://blog.csdn.net/zhshulin/article/details/37956105#comments 使用SSM(Spring.SpringMVC和Mybatis) ...

  6. [转]响应式WEB设计学习(2)—视频能够做成响应式吗

    原文地址:http://www.jb51.net/web/70361.html 上集回顾: 昨天讲了页面如何根据不同的设备尺寸做出响应.主要是利用了@media命令以及尺寸百分比化这两招. 上集补充: ...

  7. android textview改变部分文字的颜色和string.xml中文字的替换(转)

    转   :http://blog.csdn.net/ljz2009y/article/details/23878669 一:TextView组件改变部分文字的颜色: TextView textView ...

  8. .Net Core 1.0.0正式版安装及示例教程

    使用VS Code 从零开始开发调试.NET Core 1.0 RTM. .NET Core 是一个开源的.跨平台的 .NET 实现. VS Code 全称是 Visual Studio Code,V ...

  9. 状态压缩 HDU1074

    t组数据 n门课程 底限 完成要几天 dp[i] 表示i的二进制数中  1 对应位置课程 完成  最少扣多少分 完成的时间 记录一下怎么下来的 1->2^n 列举 (1<<n)   ...

  10. 关于二叉排序树 BST

    #include<stdio.h> #include<stdlib.h> typedef struct node { double w; struct node *l,*r; ...