checkbox三种状态

最新推荐文章于 2024-05-23 15:36:14 发布

weixin_34310127

最新推荐文章于 2024-05-23 15:36:14 发布

阅读量368

点赞数

文章标签： xhtml java javascript ViewUI

原文链接：https://yq.aliyun.com/articles/42457

版权

JS操作checkbox http://honeyao.iteye.com/blog/238424

翻页后保持checkbox选中状态的实现方法：在界面中，使用纯js完成。把选中的checkbox中的id，其中包括模块id，操作id，拼接成一个字符串，然后把字符串传递提交

     Java代码   
     
   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>用图片模拟checkbox三种状态,图片checkbox和checkbox的联动</title>  
        <script language="javascript">  
        //图片checkbox全选和全不选,控制两个checkbox的函数  
        function img_cb_choose(elmId, elmCldNm) {  
            var value = document.getElementById(elmId).value; //取出图片的值,通过这个值判断图片CheckBox的三个状态  
            var checkbox_array = document.getElementsByName(elmCldNm); //取出checkbox数组数  
            if (value == "default") { //图片checkbox 如果是默认不选,就变成全选  
                checkBoxAllStyle(elmId);  
                choose(checkbox_array, false, true);  
            } else if (value == "all") { //图片checkbox 如果是全选,就变成不选  
                checkBoxEmptyStyle(elmId);  
                choose(checkbox_array, true, false);  
            } else if (value == "half") { //图片checkbox 如果是半选,就变成不选  
                checkBoxEmptyStyle(elmId);  
                choose(checkbox_array, true, false);  
            }  
        }  
  
        function checkBoxAllStyle(elmId){  
            document.getElementById(elmId).src = "images/iconCheckAll.gif";  
            document.getElementById(elmId).value = "all";  
        }  
  
        function checkBoxHalfStyle(elmId){  
            document.getElementById(elmId).src = "images/iconCheckGray.gif";  
            document.getElementById(elmId).value = "half";  
        }  
  
        function checkBoxEmptyStyle(elmId){  
            document.getElementById(elmId).src = "images/iconUnCheckAll.gif";  
            document.getElementById(elmId).value = "default";  
        }  
  
        //checkbox 控制图片checkbox  
        function change(elmId, elmCldNm) {  
            var checkValues = new Array();  
              
            var checkbox_array = document.getElementsByName(elmCldNm); //取出checkbox数组  
            var str_length = 0; //选择checkbox的个数  
            var checkbox_length = checkbox_array.length; //数组的长度  
            for (i = 0; i < checkbox_length; i++) {  
                if (checkbox_array[i].checked == true) {  
                    str_length++;  
                    checkValues.push(checkbox_array[i].value);  
                }  
            }  
            if (str_length == 0) { //默认 全选  
                checkBoxEmptyStyle(elmId);  
            } else if (str_length < checkbox_length) { //半选状态,点击后变成全不选.  
                checkBoxHalfStyle(elmId);  
            } else if (str_length == checkbox_length) { //全不选  
                checkBoxAllStyle(elmId);  
            }  
            //getCheckListInfo(checkValues, str_length);  
            console.log("选中的值："+checkValues+",选择checkbox的个数:"+str_length);  
        }  
  
        //传入一个CheckBox,现在的状态,要改变的状态  
        function choose(checkbox_array, status, new_status) {  
            var checkValues = new Array();  
            for (i = 0; i < checkbox_array.length; i++) { //循环所有数组  
                if (checkbox_array[i].checked == status) //现在checkbox的状态  
                {  
                    if(new_status){  
                        checkValues.push(checkbox_array[i].value);  
                    }  
                    checkbox_array[i].checked = new_status; //改变后的状态  
                }  
            }  
            console.log("选中的值："+checkValues);  
        }  
        </script>  
    </head>  
    <body>  
        <div id="main">  
            <div id="images_checkbox">  
                <input id="img_checkbox" type="image" src="images/iconUnCheckAll.gif"  
                οnclick="img_cb_choose('img_checkbox','checkbox1');" value="default" />  
            </div>  
            <div>  
                <input name="checkbox1" type="checkbox" value="1" οnclick="change('img_checkbox','checkbox1');"  
                />  
                <br />  
                <input name="checkbox1" type="checkbox" value="2" οnclick="change('img_checkbox','checkbox1');"  
                />  
            </div>  
        </div>  
    </body>  
</html>  

weixin_34310127

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox三种状态

JS操作checkboxhttp://honeyao.iteye.com/blog/238424翻页后保持checkbox选中状态的实现方法：在界面中，使用纯js完成。把选中的checkbox中的id，其中包括模块id，操作id，拼接成一个字符串，然后把字符串传递提交Java代码<!DOCTYPEhtmlPUBLIC"-...
复制链接

扫一扫