HTML-CSS群中单选引发的“事件”


Posted in Javascript onMarch 05, 2007

因为死神的一个单选按钮问题,N多人出来扯淡,唉,偶这个菜鸟级人物也出来,混水摸鱼去。一个不小心也摸到了一条。

首先看从baidu中挖出来的一段代码,偶就从这里动手的。

<script>  
function checkradio()  
{  
    for(i=0;i<document.form1.Fruit.length;i++)  
    {  
        if(document.form1.Fruit[i].checked)  
        {  
            alert("您最喜欢的水果是:"+document.form1.Fruit[i].nextSibling.nodeValue);  
        }  
    }  
}  
</script>  
<form name="form1">  
您最喜欢的水果是:<br>  
<input type=radio value="Fruit1" name="Fruit" checked>苹果   
<input type=radio value="Fruit2" name="Fruit">香蕉  
<input type=radio value="Fruit3" name="Fruit">草莓  
<input type=radio value="Fruit4" name="Fruit">凤梨  
<input type=button value="选择" onclick="checkradio()">  
</form> 

这段代码的作用是判断所选的值。

现在要的效果是如果每个选项都为空的时候要给出一个提示,下面的代码就是偶改动后的效果

 程序代码
<script>
function checkradio()
{
    var j=0;
    for(i=0;i<document.form1.Fruit.length;i++)
    {
        if(document.form1.Fruit[i].checked==true)
        {
            alert("你选择了"+document.form1.Fruit[i].nextSibling.nodeValue);
            //break;这个break经飞飞指点,无效,去掉
        }else{
            j=j+1;
            if(j==4){
                alert("靠,你TMD选一个,偶就不用出来了噶!");
            }
        }
    }
}
</script>
<form name="form1">
您最喜欢的水果是:<br>
<input type=radio value="Fruit1" name="Fruit">
苹果 
<input type=radio value="Fruit2" name="Fruit">香蕉
<input type=radio value="Fruit3" name="Fruit">草莓
<input type=radio value="Fruit4" name="Fruit">凤梨
<input type=button value="选择" onclick="checkradio()">
</form> 

后来又看到了一个由晨写的更清晰的一段代码,在这里也帖一下。
(注:为了便于测试,改动了一下,思路还是他的思路)

<script>  
function checkradio()  
{  
    var flag=false;  
    for(var i=0;i<=document.form1.Fruit.length-1;i++)  
    {  
          if(form1.Fruit[i].checked){  
            flag=true;}  
    }  
    if(flag)  
    {  
          alert("^_^");  
          return false;  
    }else{  
        alert("大侠,您老就选一个吧!");  
    }  
}  
</script> 

单选的结束了,飞飞老大不死心,在晚上的时候搞出了一个针对复选框的代码。

<script>  
    var j=document.getElementsByName("Fruit");  
function allche(){  
    for(var i=0; i <j.length; i++){  
            if(document.form1.Fruit[i].checked!=true) document.form1.Fruit[i].checked= document.form1.suoy.checked;  
            if(document.form1.Fruit[i].checked==true) document.form1.Fruit[i].checked= document.form1.suoy.checked;  
    }  
}  
function checkall(){  
var aa=0  
    for(var i=0; i <j.length; i++){      
            if(document.form1.Fruit[i].checked == true)  aa++;  
             aa!=j.length ? document.form1.suoy.checked=false : document.form1.suoy.checked=true;  
    }  
}  
function checkradio(){  
var a=0  
var list=""  
for(var i=0; i<j.length;i++)  
if (document.form1.Fruit[i].checked== true){  
list=="" ? list=document.form1.Fruit[i].value : list=list+","+document.form1.Fruit[i].value;  
}  
if (list!="") alert("你喜欢的水果是"+list);  else{  
a++;  
if (a==j.length)alert("大哥。你都不选我怎么知道你喜欢什么?");}  
}  
</script>  
<form name="form1" id="frm">  
  您最喜欢的水果是:<br>  
  <input type=checkbox value="苹果" name="Fruit" onClick="checkall()">  
  苹果  
  <input type=checkbox value="香蕉" name="Fruit" onClick="checkall()">  
  香蕉  
  <input type=checkbox value="草莓" name="Fruit" onClick="checkall()">  
  草莓  
  <input type=checkbox value="凤梨" name="Fruit" onClick="checkall()">  
  凤梨  
  <input type=button value="选择" onclick="checkradio()">  
  <input type=checkbox   onclick="allche()" name="suoy">全选  
</form>  
<script language="javascript" type="text/javascript" id="commonjs">  
function test()  
{  
    fruitlist = "";  
    for(i=0;i<document.getElementById("frm").length;i++)  
        if(document.getElementById("frm")[i].type=="checkbox" && document.getElementById("frm")[i].checked)  
            fruitlist += document.getElementById("frm")[i].value + " ";  
    if(fruitlist!="")  
        alert("你喜欢的水果是 "+fruitlist);  
    else  
        alert("大哥。你都不选我怎么知道你喜欢什么?");  
}  
</script>  

再来一段更简洁的代码、效果更好的关于复选的代码。 
<SCRIPT LANGUAGE="JavaScript">  
<!-- Begin  
function checkAll() {  
for (var j = 1; j <= 9; j++) {  
box = eval("document.checkboxform.C" + j);   
if (box.checked == false) box.checked = true;  
   }  
}  function uncheckAll() {  
for (var j = 1; j <= 9; j++) {  
box = eval("document.checkboxform.C" + j);   
if (box.checked == true) box.checked = false;  
   }  
}  
function switchAll() {  
for (var j = 1; j <= 9; j++) {  
box = eval("document.checkboxform.C" + j);   
box.checked = !box.checked;  
   }  
}  
//  End -->  
</script>  
</head>  
<body>  
<form name=checkboxform>  
<input type=checkbox name=C1>C1<br>  
<input type=checkbox name=C2>C2<br>  
<input type=checkbox name=C3>C3<br>  
<input type=checkbox name=C4>C4<br>  
<input type=checkbox name=C5>C5<br>  
<input type=checkbox name=C6>C6<br>  
<input type=checkbox name=C7>C7<br>  
<input type=checkbox name=C8>C8<br>  
<input type=checkbox name=C9>C9<br>  
<br>  
<input type=button value="全选" onClick="checkAll()"><br>  
<input type=button value="取消" onClick="uncheckAll()"><br>  
<input type=button value="反选" onClick="switchAll()"><br>  
</form> 
Javascript 相关文章推荐
Javascript倒计时代码
Aug 12 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
axios post提交formdata的实例
Mar 16 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
用javascript实现页面打印的三种方法
Mar 05 #Javascript
一个可以显示阴历的JS代码
Mar 05 #Javascript
JavaScript实现Sleep函数的代码
Mar 04 #Javascript
Javascript中暂停功能的实现代码
Mar 04 #Javascript
参考:关于Javascript中实现暂停的几篇文章
Mar 04 #Javascript
插件:检测javascript的内存泄漏
Mar 04 #Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP 一个随机字符串生成代码
2010/05/26 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
TypeScript 中接口详解
2015/06/19 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python中使用异常处理来判断运行的操作系统平台方法
2015/01/22 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
公务员职业生涯规划书范文  
2014/01/19 职场文书
小学数学教学反思
2014/02/02 职场文书
绩效工资实施方案
2014/03/15 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
药剂专业求职信
2014/06/20 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
技术股份合作协议书
2014/10/05 职场文书
工作年限证明模板
2014/11/01 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
护理培训心得体会
2016/01/22 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
Java中API的使用方法详情
2022/04/06 Java/Android