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 相关文章推荐
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
element-ui表格合并span-method的实现方法
May 21 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
对vuex中store和$store的区别说明
Jul 24 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php字符串过滤与替换小结
2015/01/26 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python开发的实用计算器完整实例
2017/05/10 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
实例详解Python模块decimal
2019/06/26 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
大二学习计划书范文
2014/04/27 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
详解CSS3浏览器兼容
2022/12/24 HTML / CSS
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript