JS獲取復選框中當前選中的值 · 前端開發

``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>JS獲取復選框中當前選中的值</title> </head> <script type="text/javascript"> window.onload = function() { select_item(); } function select_item() { var aFruit=document.getElementsByName("checkfruit"); var oSelectAll=document.getElementById("selectAll"); var oP=document.getElementById("content"); var str=""; //全選/全不選 oSelectAll.onchange=function() { if(this.checked) { for(var i=0;i<aFruit.length;i++) { aFruit[i].checked=true; str+=aFruit[i].value+" "; } oP.innerText="你選擇的瓜是："+str; }else { for(var i=0;i<aFruit.length;i++) { aFruit[i].checked=false; } oP.innerText="你沒有選擇任何瓜"; str=""; } } //單個點擊復選框 var str1=""; for(var i=0;i<aFruit.length;i++) { aFruit[i].onchange=function() { if(this.checked) { str1=str1+this.value+" "; }else { str1=str1.replace(this.value,""); } oP.innerText="你選擇的瓜是："+str1; } } } </script> <body> <div> <label><input type="checkbox" id="selectAll"/>全選/全不選：</label><br /><br /> <label><input type="checkbox" name="checkfruit" value="冬瓜"/>冬瓜</label> <label><input type="checkbox" name="checkfruit" value="南瓜"/>南瓜</label> <label><input type="checkbox" name="checkfruit" value="西瓜"/>西瓜</label> <label><input type="checkbox" name="checkfruit" value="北瓜"/>北瓜</label> </div> <p id="content"></p> </body> </html> ```