Home > Developer > Web Develop
1<! DOCTYPE html>234<meta charset= "UTF-8" >5<title>checkbox</title>6<style type= "Text/css" >7 . main{8 width:400px;9 height:400px;Ten margin:20px Auto; One } A li{ -list-Style:none; -text-shadow:5px 5px 3px Rgba (53,56,41,0.5); the } - h3{ -text-Align:center; -text-shadow:5px 5px 3px Rgba (53,56,41,0.5); + Color:blue; - } + . boxs,.choice{ A position:relative; at left:100px; - } -</style> - - -<body> in -<div class=main> to +<div class= "Boxs" > -<ul> the<li><input type= "checkbox"/> Macy's </li> *<li><input type= "checkbox"/> Neymar </li> $<li><input type= "checkbox"/> Suarez </li>Panax Notoginseng<li><input type= "checkbox"/> Illesta </li> -<li><input type= "checkbox"/> Roberto </li> the<li><input type= "checkbox"/> Lakitic </li> +</ul> A</div> the<div class= "Choice" > +<button onclick= "SELECT (1)" > select all </button> -<button onclick= "SELECT (2)" > select all </button> $<button onclick= "SELECT (3)" > Reverse </button> $</div> -</div> - the<script> - functionSelect (num)Wuyi { the varItems = document.getelementsbytagname (' input ') - for(vari=0; i<items.length; i++) Wu { - Switch(num) About { $ Case1:items[i].checked =true; Break; - Case2:items[i].checked =false; Break; - Case3:items[i].checked=!items[i].checked; Break; - A } the } - } $</script> the</body> theJS implementation check box selection, full selection and inverse selection
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
