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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
javascript中函数作为参数调用的方法
Feb 09 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
深入学习Bootstrap表单
Dec 13 Javascript
详解Axios统一错误处理与后置
Sep 26 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获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
校园门卫岗位职责
2013/12/09 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
预备党员介绍人意见
2015/06/01 职场文书
小学安全教育主题班会
2015/08/12 职场文书