Select exercise

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <script type="text/javascript">
  8  window.onload=function(){
  9  var b01=document.getElementById("checkedAll");
 10  varA = document.getElementsByName ( " items " );
 . 11   var checkAllBox = document.getElementById ( " checkAllBox " );
 12 is  b01.onclick = function () {
 13 is     / * 
14     disposed over four box into a selected state
 15     through a plurality the box may be acquired property checked checkbox is checked
 16     Alert (a [I] .checked);
 . 17     * / 
18 is     for ( var I = 0 ; I < a.length; I ++ )
 . 19     {
 20 is    a[i].checked=true;
 21    }
 22    checkedAllBox.checked=true;
 23 
 24  };
 25   var b02=document.getElementById("notChecked");
 26   b02.onclick=function(){
 27   for(var i=0;i<a.length;i++){
 28   a[i].checked=false;
 29   }
 30 
 31   };
 32    var B03 = document.getElementById ( " checkedReverse " );
 33 is    b03.onclick = function () {
 34 is    for ( var I = 0 ; I < a.length; I ++ )
 35    A [I] .checked = ! a [I] .checked;
 36    };
 37 [    / * 
38 is    the submit button
 39    click the button, all the selected multi-value property of the popup box
 40    is sent to bind click response function
 41 is    * / 
42 is    var Send =document.getElementById ( " Sent " );
 43 is    sent.onclick = function () {
 44 is    for ( var I = 0 ; I < a.length; I ++ ) {
 45    IF (A [I] .checked)
 46 is    Alert ( a [I] .Value);
 47    }
 48    };
 49    / * 
50    select / Unselect check box
 51    when it is selected, the rest is also selected, it is canceled when the cancel the remaining
 52    in response function response function is bound to whom, this is who
 53    * / 
54    // to checkedAllBox binding response function 
55   checkAllBox.onclick = function () {
 56 is    var In Flag = the this .checked;
 57 is    for ( var I = 0 ; I < a.length; I ++ ) {
 58    A [I] .checked = In Flag;
 59    }
 60    }
 61 is    / * 
62    If more than four boxes are all checked, checkAllBox should also be checked
 63    if more than four boxes are not checked, checkAllBox should not be selected
 64    four check boxes are binding click response function
 65    * / 
66    for ( var I = 0;i<a.length;i++)
 67   {
 68   a[i].onclick=function(){
 69   checkAllBox.checked=true;
 70    for(var j=0;j<a.length;j++){
 71    if(!a[j].checked){
 72     checkAllBox.checked=false;
 73     break;
 74    }
 75    }
 76   }
 77 
78    }
 79  };
 80    </ Script > 
81  
82  < body > 
83  ! <- 
84  the parentNode represents the parent of the current node
 85  previousSibling represent previous sibling of the current node (to be acquired blank text)
 86  previousElementSibling acquired before a sibling does not support ie8 and below
 87  nextSibling representation after a sibling of the current node
 88  -> 
89  < form Method, = "pOST" Action = "" > 
90 you like sport? < INPUT type = "CheckBox" ID = "checkAllBox" /> 91 <br/>
 92 <input type="checkbox" name="items" value="football">football
 93 <input type="checkbox" name="items" value="basketball">basketball
 94 <input type="checkbox" name="items" value="baseball">baseball
 95 <br/>
 96 <input type="button" id="checkedAll" value="全 选"/>
 97 <input type="button" id="notChecked" value="全不选"/>
 98 <input type="button" id="checkedReverse" value="反选"/>
 99 <input type="button" id="sent" value="提交"/>
100 </form>
101 </body>
102 </html>
Guess you like
