標籤：png inpu click body blog break gif 9.png bre
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>checkbox</title> 6 <style type="text/css"> 7 .main{ 8 width: 400px; 9 height: 400px;10 margin: 20px auto;11 }12 li{13 list-style: none;14 text-shadow: 5px 5px 3px rgba(53,56,41,0.5);15 }16 h3{17 text-align: center;18 text-shadow: 5px 5px 3px rgba(53,56,41,0.5);19 color: blue;20 }21 .boxs,.choice{22 position: relative;23 left: 100px;24 }25 </style>26 27 </head>28 <body>29 30 <div class=main>31 <h3>賽季最佳球員候選</h3>32 <div class="boxs">33 <ul>34 <li><input type="checkbox"/>梅西</li>35 <li><input type="checkbox"/>內馬爾</li>36 <li><input type="checkbox"/>蘇亞雷斯</li>37 <li><input type="checkbox"/>伊列斯塔</li>38 <li><input type="checkbox"/>羅伯托</li>39 <li><input type="checkbox"/>拉基蒂奇</li>40 </ul>41 </div> 42 <div class="choice">43 <button onclick="select(1)">全選</button>44 <button onclick="select(2)">全不選</button>45 <button onclick="select(3)">反選</button>46 </div>47 </div>48 49 <script>50 function select(num) 51 {52 var items = document.getElementsByTagName(‘input‘)53 for(var i=0; i<items.length; i++)54 { 55 switch(num)56 {57 case 1:items[i].checked = true;break;58 case 2:items[i].checked = false;break;59 case 3:items[i].checked= !items[i].checked;break;60 61 } 63 } 64 }65 </script>66 </body>67 </html>
js實現複選框的全選、全部選和反選
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
