JavaScript는 체크박스에서 선택된 값의 개수와 값을 확인합니다.-JS 튜토리얼-php.cn

JavaScript는 체크박스에서 선택된 값의 개수와 값을 확인합니다.

高洛峰

풀어 주다： 2016-11-25 14:22:53

원래의

1151명이 탐색했습니다.

<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(&#39;<input type="checkbox" name="ck" value="&#39;+i+&#39;" /><br />&#39;); 
        } 
        document.write(&#39;<br /><input type="button" id="ckall" name="ckall" value="全选" onclick="checkall();" /> <input type="button" name="delall" value="删除所选" id="delall" />&#39;); 
        document.write(&#39;<br />  <label id="text" style="display:none;"></label>&#39;); 
        // 是否全选复选框函数 
        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(&#39;请先选中数据！&#39;);    
            } 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 = &#39;12px&#39;; // 设置字体大小 
                var t = "删除数据为：";         // t 为text要显示的内容 
                for (j=0;j<arr.length;j++) { 
                    t += arr[j]+" "; 
                }  www.2cto.com
                text.innerHTML = t; 
            } 
        } 
    </script> 
     
</body> 
</html>

로그인 후 복사