HTML-CSS群中單選引發的“事件”

2019-11-21 02:14:43

字體：大中小

來源：轉載

供稿：網友

因為死神的一個單選按鈕問題，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> 