欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-29 09:05:46
因为死神的一个单选按钮问题,n多人出来扯淡,唉,偶这个菜鸟级人物也出来,混水摸鱼去。一个不小心也摸到了一条。 首先看从baidu中挖出来的一段代码,偶就从这里动手的。 复制...
因为死神的一个单选按钮问题,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>