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 插件学习(三)
Aug 06 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
javascript self对象使用详解
Oct 18 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
JS实现一个简单的日历
Feb 22 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
node.js express框架简介与实现
Jul 23 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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
Python爬虫开发与项目实战
2020/12/16 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
别名指示符是什么
2012/10/08 面试题
民族精神月活动总结
2014/08/28 职场文书
军训通讯稿范文
2015/07/18 职场文书
Mysql基础之常见函数
2021/04/22 MySQL
python 常用的异步框架汇总整理
2021/06/18 Python