Heim > Web-Frontend > js-Tutorial > HTML-CSS群中单选引发的“事件”_表单特效

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

WBOY
Freigeben: 2016-05-16 19:18:14
Original
1056 Leute haben es durchsucht

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

 

 

 

 
 
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage