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 相关文章推荐
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
类的另类用法--数据的封装
2006/10/09 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
基于python 字符编码的理解
2017/09/02 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python标准库shutil用法实例详解
2018/08/13 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python更换pip源方法过程解析
2020/05/19 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
介绍一下SQL Server的全文索引
2013/08/15 面试题
大学生毕业的自我鉴定
2013/11/13 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
信息总监管理职责范本
2014/03/08 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
中学生思想品德评语
2014/12/31 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏