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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
jQuery技巧总结
Jan 01 Javascript
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
JS获取动态添加元素的方法详解
Jul 31 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
详解Vue的sync修饰符
May 15 Vue.js
用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
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
vuejs动态组件给子组件传递数据的方法详解
2016/09/09 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
python分布式编程实现过程解析
2019/11/08 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
python 5个顶级异步框架推荐
2020/09/09 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
一些Solaris面试题
2013/03/22 面试题
干部行政关系介绍信
2014/01/17 职场文书
公务员保密承诺书
2014/03/27 职场文书
产品开发计划书
2014/04/27 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
好人好事演讲稿
2014/09/01 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
银行转正自我鉴定
2014/09/29 职场文书
司机个人年终总结
2015/03/03 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
详解JS数组方法
2021/11/20 Javascript