search

Home >Web Front-end >JS Tutorial >JavaScript checks the number and value of selected values ​​in a checkbox

JavaScript checks the number and value of selected values ​​in a checkbox

高洛峰
高洛峰Original
2016-11-25 14:22:531198browse

<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>


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Basic methods of string concatenation and segmentationNext article：Basic methods of string concatenation and segmentation

Related articles

See more