HTML-CSS群中單選引發的“事件”_表單特效

來源:互聯網
上載者:User
因為死神的一個選項按鈕問題,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> 
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.