<body onload=check()> <h3>三态的checkbox(变化顺序:未选中->灰色选中->白色选中)</h3><br> <form name=test> 根据onclick变化的checkbox:<br> <input type=checkbox name=checkbox0 flag=0 onclick="gray(this)">初始化为未选中的checkbox<br> </td><td><input type=checkbox name=checkbox1 flag=1 onclick="gray(this)">初始化为白色选中的checkbox<br> </td><td><input type=checkbox name=checkbox2 flag=2 onclick="gray(this)">初始化为灰色选中的checkbox<br> 根据onpropertychange变化的checkbox:<br> <input type=checkbox name=checkbox3 onpropertychange="gray2(this)">初始化为未选中的checkbox </form> </body> <script language=javascript> //用于onclick,需要一个自定义属性flag. function gray(c) { switch(c.flag) { //当flag为0时,为未选中状态 case "0":c.checked=true;c.indeterminate=true;c.flag="2";break; //当flag未1时,为白色选中状态 case "2":c.checked=true;c.indeterminate=false;c.flag="1";break; //当flag为2时,为灰色选中状态 case "1":c.checked=false;c.indeterminate=false;c.flag="0";break; } } //用于onpropertychange function gray2(c) { c.indeterminate=c.checked; } //用于body的onload,根据checkbox的flag属性判断checkbox的状态 function check() { for(var i = 0;i<document.test.elements.length;i++) { var ele = document.test.elements[i]; if(ele.flag!=null) { if(ele.flag=="0") { ele.checked = false; ele.indeterminate = false; } if(ele.flag=="1") { ele.checked = true; ele.indeterminate = false; } if(ele.flag=="2") { ele.checked = true; ele.indeterminate = true; } } } } </script>
|