首頁  >  文章  >  web前端  >  HTML-CSS群中单选引发的“事件”_表单特效

HTML-CSS群中单选引发的“事件”_表单特效

WBOY
WBOY原創
2016-05-16 19:18:14997瀏覽

因为死神的一个单选按钮问题,N多人出来扯淡,唉,偶这个菜鸟级人物也出来,混水摸鱼去。一个不小心也摸到了一条。

首先看从baidu中挖出来的一段代码,偶就从这里动手的。

复制代码 代码如下:

<script> <BR>function checkradio() <BR>{ <BR> for(i=0;i<document.form1.Fruit.length;i++) <BR> { <BR> if(document.form1.Fruit[i].checked) <BR> { <BR> alert("您最喜欢的水果是:"+document.form1.Fruit[i].nextSibling.nodeValue); <BR> } <BR> } <BR>} <BR></script> 
 
您最喜欢的水果是:
 
苹果  
香蕉 
草莓 
凤梨 
 
 

这段代码的作用是判断所选的值。

现在要的效果是如果每个选项都为空的时候要给出一个提示,下面的代码就是偶改动后的效果

 程序代码
<script> <BR>function checkradio() <BR>{ <BR> var j=0; <BR> for(i=0;i<document.form1.Fruit.length;i++) <BR> { <BR> if(document.form1.Fruit[i].checked==true) <BR> { <BR> alert("你选择了"+document.form1.Fruit[i].nextSibling.nodeValue); <BR> //break;这个break经飞飞指点,无效,去掉 <BR> }else{ <BR> j=j+1; <BR> if(j==4){ <BR> alert("靠,你TMD选一个,偶就不用出来了噶!"); <BR> } <BR> } <BR> } <BR>} <BR></script>

您最喜欢的水果是:


苹果 
香蕉
草莓
凤梨

 


后来又看到了一个由晨写的更清晰的一段代码,在这里也帖一下。
(注:为了便于测试,改动了一下,思路还是他的思路)
复制代码 代码如下:

<script> <BR>function checkradio() <BR>{ <BR> var flag=false; <BR> for(var i=0;i<=document.form1.Fruit.length-1;i++) <BR> { <BR> if(form1.Fruit[i].checked){ <BR> flag=true;} <BR> } <BR> if(flag) <BR> { <BR> alert("^_^"); <BR> return false; <BR> }else{ <BR> alert("大侠,您老就选一个吧!"); <BR> } <BR>} <BR></script> 


单选的结束了,飞飞老大不死心,在晚上的时候搞出了一个针对复选框的代码。
复制代码 代码如下:

<script> <BR> var j=document.getElementsByName("Fruit"); <BR>function allche(){ <BR> for(var i=0; i <j.length; i++){ <BR> if(document.form1.Fruit[i].checked!=true) document.form1.Fruit[i].checked= document.form1.suoy.checked; <BR> if(document.form1.Fruit[i].checked==true) document.form1.Fruit[i].checked= document.form1.suoy.checked; <BR> } <BR>} <BR>function checkall(){ <BR>var aa=0 <BR> for(var i=0; i <j.length; i++){ <BR> if(document.form1.Fruit[i].checked == true) aa++; <BR> aa!=j.length ? document.form1.suoy.checked=false : document.form1.suoy.checked=true; <BR> } <BR>} <BR>function checkradio(){ <BR>var a=0 <BR>var list="" <BR>for(var i=0; i<j.length;i++) <BR>if (document.form1.Fruit[i].checked== true){ <BR>list=="" ? list=document.form1.Fruit[i].value : list=list+","+document.form1.Fruit[i].value; <BR>} <BR>if (list!="") alert("你喜欢的水果是"+list); <br><br>else{ <BR>a++; <BR>if (a==j.length)alert("大哥。你都不选我怎么知道你喜欢什么?");} <BR>} <br><br></script> 
 
  您最喜欢的水果是:
 
   
  苹果 
   
  香蕉 
   
  草莓 
   
  凤梨 
   
  全选 
 

<script> <BR>function test() <BR>{ <BR> fruitlist = ""; <BR> for(i=0;i<document.getElementById("frm").length;i++) <BR> if(document.getElementById("frm")[i].type=="checkbox" && document.getElementById("frm")[i].checked) <BR> fruitlist += document.getElementById("frm")[i].value + " "; <BR> if(fruitlist!="") <BR> alert("你喜欢的水果是 "+fruitlist); <BR> else <BR> alert("大哥。你都不选我怎么知道你喜欢什么?"); <BR>} <BR></script>  

再来一段更简洁的代码、效果更好的关于复选的代码。 
复制代码 代码如下:

<script> <BR><!-- Begin <BR>function checkAll() { <BR>for (var j = 1; j <= 9; j++) { <BR>box = eval("document.checkboxform.C" + j); <BR>if (box.checked == false) box.checked = true; <BR> } <BR>} <br><br>function uncheckAll() { <BR>for (var j = 1; j <= 9; j++) { <BR>box = eval("document.checkboxform.C" + j); <BR>if (box.checked == true) box.checked = false; <BR> } <BR>} <br><br>function switchAll() { <BR>for (var j = 1; j <= 9; j++) { <BR>box = eval("document.checkboxform.C" + j); <BR>box.checked = !box.checked; <BR> } <BR>} <BR>// End --> <BR></script> 
 
 
 
C1
 
C2
 
C3
 
C4
 
C5
 
C6
 
C7
 
C8
 
C9
 

 

 

 

 
 
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn