软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

checkbox三种状态

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

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

<!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"onclick="img_cb_choose('img_checkbox','checkbox1');" value="default" /></div><div><input name="checkbox1" type="checkbox" value="1" onclick="change('img_checkbox','checkbox1');"/><br /><input name="checkbox1" type="checkbox" value="2" onclick="change('img_checkbox','checkbox1');"/></div></div></body></html>
   images.rar (598 Bytes) 下载次数: 63