JavaScript檢查復選框選中的值個數及值 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>JavaScript檢查復選框選中的值個數及值</title> 
</head> 
 
<body> 
    <script language="javascript"> 
        var i = 0; 
        for (;i<20;i++) { 
            document.write('<input type="checkbox" name="ck" value="'+i+'" /><br />'); 
        } 
        document.write('<br /><input type="button" id="ckall" name="ckall" value="全選" onclick="checkall();" /> <input type="button" name="delall" value="刪除所選" id="delall" />'); 
        document.write('<br />  <label id="text" style="display:none;"></label>'); 
        // 是否全選復選框函數 
        function checkall() { 
            var ckall = document.getElementById("ckall"); // 全選按鈕對象 
            var ck = document.getElementsByName("ck"); // 復選框對象 
            // 當要執行全選時 
            if (ckall.value=="全選") { 
                var j = 0; 
                // 循環把復選框選中 
                for (;j<20;j++) { 
                    ck[j].checked = "true"; 
                } 
                ckall.value="全不選"; 
            } else if (ckall.value=="全不選") { 
                // 當要執行全選時 
                document.getElementById("delall").disabled=false;   // 去掉delall按鈕的disabled 
                document.getElementById("delall").value="刪除所選"; // 修改elall按鈕的value為“刪除所選” 
                document.getElementById("text").style.display="none"; // 設置 text 為隱藏 
                // 循環設置全不選 
                for (j=0;j<20;j++) { 
                    ck[j].checked = null; 
                } 
                ckall.value="全選"; 
            } 
        } 
        var delall = document.getElementById("delall"); 
        // 點擊刪除按鈕執行下面函數 
        delall.onclick=function(){ 
            var arr = Array();  // arr為數組 
            var ck = document.getElementsByName("ck"); 
            for (i=0;i<20;i++) { 
                if (ck[i].checked) { 
                    arr.push(ck[i].value);  // 當復選框選中中將選中的值累加到arr這個數組中 
                } 
            } 
            // 判斷arr數組的個數,如果為0,那麼就是沒有選中,彈出警告信息 
            if (arr.length==0) { 
                alert('請先選中數據!');    
            } else if (arr.length>0){ 
                // 下面是執行刪除動作 
                delall.disabled=true; // 設置delall按鈕為不可點 
                delall.value="正在刪除…"; // 設置delall按鈕的value為“正在刪除…” 
                var text = document.getElementById("text"); 
                text.style.display="block";   // 顯示 text 
                text.style.fontSize = '12px'; // 設置字體大小 
                var t = "刪除數據為:";         // t 為text要顯示的內容 
                for (j=0;j<arr.length;j++) { 
                    t += arr[j]+" "; 
                }  www.aiwalls.com
                text.innerHTML = t; 
            } 
        } 
    </script> 
     
</body> 
</html> 
 

摘自 Lee.的專欄

發佈留言