'Event' triggered by radio selection in HTML-CSS group_form special effects-JS Tutorial-php.cn

'Event' triggered by radio selection in HTML-CSS group_form special effects

WBOY

Release： 2016-05-16 19:18:14

Original

1054 people have browsed it

Because of a radio button problem with the God of Death, many people came out to talk nonsense. Alas, even this rookie level person also came out to fish in troubled waters. I accidentally touched one.

First of all, let’s look at a piece of code dug out from Baidu. This is where I started.

Copy code The code is as follows:

<script> <br>function checkradio() <br>{ <br> for(i=0;i<document.form1.Fruit.length;i ) <BR> { <BR> if(document.form1.Fruit[i].checked) <BR> { > alert("Your favorite fruit is:" document.form1.Fruit[i].nextSibling.nodeValue); <BR> ;form name="form1"> <br>Your favorite fruit is:<br> <br><input type=radio value="Fruit1" name="Fruit" checked>Apple <br>< input type=radio value="Fruit2" name="Fruit">Banana <br><input type=radio value="Fruit3" name="Fruit">Strawberry <br><input type=radio value= "Fruit4" name="Fruit">Pineapple <br><input type=button value="Select" onclick="checkradio()"> <br></form> <br><br><br>The purpose of this code is to determine the selected value. <br><br>The desired effect now is to give a prompt if each option is empty. The following code is the effect after the changes <br>
</div> Program code <br><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("You selected" document.form1.Fruit[i].nextSibling.nodeValue); <br> { <br> //break;This break After Feifei pointed it out, it is invalid, remove <br>     } else{ <br>           j=j 1;                                                                                     Alright! "); <br>                                                                                        The fruit is:<br> <br><input type=radio value="Fruit1" name="Fruit"> <br>Apple <br><input type=radio value="Fruit2" name="Fruit ">Banana<br><input type=radio value="Fruit3" name="Fruit">Strawberry<br><input type=radio value="Fruit4" name="Fruit">Pineapple<br><input type=button value="Select" onclick="checkradio()"> <br></form> <br><br><br>Later I saw a clearer one written by Chen A piece of code, please post it here. <br> (Note: For the convenience of testing, I changed it a bit, but the idea is still his) <br><br><br><br><br>Copy the code<br><br><br> The code is as follows:<br><div class="codebody" id="code32343">
<br><script> <br>function checkradio() <br>{ <br> var flag=false; <br> for(var i=0;i<=document.form1.Fruit.length- 1;i ) <BR>                                                   alert ("^_^"); <BR> return false; <BR> }else{ <BR> alert("Hero, just choose one!"); <BR> } <BR>} <BR> </script> 

The radio selection is over. Boss Feifei didn’t give up and came up with a code for the check box at night.

Copy code

The code is as follows:

<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>  
  
  您最喜欢的水果是：
  
    
  苹果  
    
  香蕉  
    
  草莓  
    
  凤梨  
    
  全选  
  

  
function test()  
{  
    fruitlist = "";  
    for(i=0;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("大哥。你都不选我怎么知道你喜欢什么？");  
}  
  

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

复制代码代码如下:

C1

C2

C3

C4

C5

C6

C7

C8

C9