Home > Developer > Web Develop
JS implementation process
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>Title</title>6<style>7 Li {8 height:30px;9line-height:30px;Tenlist-Style:none; Onefont-size:24px; A } - . b1 { - background: #CCCCCC; the } - . b2 { - Background:yellow; - } + . b3 { - Background:orange; + } A . b4 { at background:red; - } -</style> -<script> - /* - * When the mouse moves into Li in * Whether the checkbox for current Li is selected - * Yes: Li's classname = ' B4 ' to * No: Li's classname = ' B3 ' + * When the mouse moves out of the Li - * Whether the checkbox for current Li is selected the * Yes: Li's classname = ' B4 ' * * No: the classname of li = The class that was set when the original interlaced color $ * */Panax NotoginsengWindow.onload =function() { - the varUL1 = document.getElementById (' ul1 ')); + varLis = Document.queryselectorall (' li '); A varcheckboxes = ul1.queryselectorall (' input '); the varCheckall = document.getElementById (' Checkall ')); + - //add a different style to each Li $ for(vari=0; i<lis.length; i++) { $ -Lis[i].index =i; -Checkboxes[i].index =i; the - //Determine if I is an odd or an even number by i%2Wuyi if(i% 2 = = 0 ) { theLis[i].classname = ' B1 '; -LIS[I].BC = ' B1 '; Wu}Else { -Lis[i].classname = ' B2 '; AboutLIS[I].BC = ' B2 '; $ } - - //when the mouse moves in -Lis[i].onmouseover =function() { A if(checkboxes[ This. index].checked = =true ) { + This. ClassName = ' B4 '; the}Else { - This. ClassName = ' B3 '; $ } the } the the //when the mouse moves out of the theLis[i].onmouseout =function() { - if(checkboxes[ This. index].checked = =true ) { in This. ClassName = ' B4 '; the}Else { the This. ClassName = This. BC; About } the the } the + -Checkboxes[i].onclick =function() { the if( This. checked = =true ) {Bayilis[ This. Index].classname = ' B4 '; the } the - varIscheckedall =true; - for(vari=0; i<checkboxes.length; i++) { the //Console.log (checkboxes[i].checked) the if(checkboxes[i].checked = =false) { theIscheckedall =false; the } - } the Console.log (Ischeckedall) thecheckall.checked =Ischeckedall; the }94 the } the the //Select All98Checkall.onclick =function() { About for(vari=0; i<checkboxes.length; i++) { -checkboxes[i].checked = This. Checked;101 if( This. Checked) {102Lis[i].classname = ' B4 ';103}Else {104Lis[i].classname =LIS[I].BC; the }106 }107 }108 109 } the</script>111 the<body>113 the<div id= "UL1" > the<li><input type= "checkbox" > Javascript</li> the<li><input type= "checkbox" > Html</li>117<li><input type= "checkbox" > Css</li>118<li><input type= "checkbox" > Html5</li>119<li><input type= "checkbox" > Css3</li> -<li><input type= "checkbox" > Nodejs</li>121</div>122<input type= "checkbox" id= "Checkall" >Select All123 124</body> theThe wording of JQ:
1<! DOCTYPE html>234<meta charset= "Utf-8" >5<script type= "Text/javascript" src= "Http://libs.baidu.com/jquery/1.7.2/jquery.min.js" ></script>6<script type= "Text/javascript" >7 //A higher version of the JQ library has a bug. The lower version of JQ is possible.8$(function(){9 varChkall = $ (' #chkAll ');Ten varChknone = $ (' #chkNone '); One varChkreverse = $ (' #chkReverse '); A varCheckBox = $ (' #checkbox >:checkbox '); - console.log (checkbox); - theChkall.click (function(){ - //checkbox.attr (' checked ', ' checked '); -Checkbox.attr (' checked ',true); - }); +Chknone.click (function(){ - //checkbox.removeattr (' checked '); +Checkbox.attr (' checked ',false); A }); atChkreverse.click (function(){ -Checkbox.each (function(){ -$( This). attr (' checked ',!$ ( This). attr (' checked ')); - }); - }); - in }); -</script> to +<body> -<div id= "checkbox" > the<input type= "checkbox" Name= "id=" "checked=" checked ">Eat *<input type= "checkbox" Name= "id=" ">Drink $<input type= "checkbox" Name= "id=" ">PlayPanax Notoginseng<input type= "checkbox" Name= "id=" ">le -<input type= "checkbox" Name= "id=" ">hit the peas . the</div> +<div id= "BTN" > A<input type= "button" id= "Chkall" value= "Select All" > the<input type= "button" id= "Chknone" value= "All not selected" > +<input type= "button" id= "Chkreverse" value= "Reverse Selection" > -</div> $</body> $Using JS and JQ respectively to achieve Baidu's selection of anti-selection effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
