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 &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
JavaScript函数详解
Nov 17 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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获取中文拼音首字母类和函数分享
2014/04/24 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
浅析Python中的join()方法的使用
2015/05/19 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python原始套接字编程实例解析
2020/01/29 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
党员教师工作决心书
2014/03/13 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
小学生差生评语
2014/12/29 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
员工离职证明范本
2015/06/12 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
python周期任务调度工具Schedule使用详解
2021/11/23 Python