HTML-CSS群中单选引发的“事件”

因为死神的一个单选按钮问题,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>

时间: 2007-03-02

jQuery中on绑定事件后引发的事件冒泡问题如何解决

用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

js表单处理中单选、多选、选择框值的获取及表单的序列化

本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

结合.net框架在C#派生类中触发基类事件及实现接口事件

在派生类中引发基类事件 以下简单示例演示了在基类中声明可从派生类引发的事件的标准方法.此模式广泛应用于 .NET Framework 类库中的 Windows 窗体类. 在创建可用作其他类的基类的类时,应考虑如下事实:事件是特殊类型的委托,只可以从声明它们的类中调用.派生类无法直接调用基类中声明的事件.尽管有时需要事件仅由基类引发,但在大多数情形下,应该允许派生类调用基类事件.为此,您可以在包含该事件的基类中创建一个受保护的调用方法.通过调用或重写此调用方法,派生类便可以间接调用该事件. 注意:

详解CSS样式中的!important、*、_符号

详解CSS样式中的!important.*._符号 !important.*._其实没什么用,皆是用来设置样式的优先级,但是样式的优先级你可以自行排好其先后位置来设置,然而你还是要看懂的. 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv

jsp中select的onchange事件用法实例

本文实例讲述了jsp中select的onchange事件用法.分享给大家供大家参考,具体如下: <script language = "JavaScript"> var onecount; onecount=0; subcat = new Array(); <% int count = 0; java.sql.ResultSet rs1 = DBManage.executeQuery("select hydm,zhydm,zhymc from zhy &qu

仅img元素创建后不添加到文档中会执行onload事件的解决方法

示例 复制代码 代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>仅img元素创建后却不添加到文档中会执行onload事件</title> </HEAD> <BODY> <script> var img = document.createElement('img'); img.src = &qu

asp.net中绑定TextBox回车事件的解决方法

1.将页面上的回车事件都绑定到按钮上 复制代码 代码如下: function EnterTextBox(e) { var msie = (document.all) ? true : false; var keycode; if(!msie) keycode = window.event ? e.keyCode : e.which; else keycode = e.keyCode; //alert(keycode); if(keycode==13 && document.getEleme

采用memcache在web集群中实现session的同步会话

使用memcache来同步session是还是不错的,当然也可以通过redis来保存session,可以php开启并将Session存储到Redis缓存,下面是设置利用memcache在web集群中同步会话session的实现过程: 1.模拟web集群 我启动了二个memcached进程,分别模拟二台服务器 /usr/local/bin/memcached -d -m 20 -u zhangy -p 12000 -P ./memcached.pid /usr/local/bin/memcache

php获取CSS文件中图片地址并下载到本地的方法

本文实例讲述了php获取CSS文件中图片地址并下载到本地的方法.分享给大家供大家参考. 具体实现代码如下: 复制代码 代码如下: /**  * 获取CSS中图片地址,并且保存到本地  */ class getInCssImage {            /**           *  图片保存下来          * @param $cssUrl css的url地址          * @param $dir 保存图片的目录          * @return void