js实现复选框 后退功能的改进
在实现复选框全选时,可通过点击一个复选框来触发全选事件.以下为html 代码片段<html> <head> <title> </title> </head> <body> <form action="" method="" name="form2"> <input type="checkbox" name="userSelect" onclick="SeleAll()"/> <input type="checkbox" name="userSelect" value="1"/> <input type="checkbox" name="userSelect" value="2"/> <input type="checkbox" name="userSelect" value="3"/> </form> </body><script><!-- SeleAll() 方法一-->var checkedAll = true;function SeleAll(){ var form = document.form2; var elements = form.elements["userSelect"];for (var i=1;i<elements.length;i++) {var e = elements[i];if(checkedAll){e.checked = "checked";} else {e.checked = false;} } if(checkedAll){checkedAll = false;} else {checkedAll = true;}}<!-- SeleAll() 方法二-->function SeleAll(){ var form = document.form2; var elements = form.elements["userSelect"];for (var i=1;i<elements.length;i++) {var e = elements[i];if(elements[0].checked){e.checked = "checked";} else {e.checked = false;} }}</script>对比: 在大多数情况下,两种方法均能实现全选,但是在某些情况下第一种方法有缺陷. 对于方法1,如果点击全选跳转到提交页面,然后再返回到本页面,再点击全选,会出现逻辑出错 对于方法2则是将复选框的第0项和剩余项的状态绑定在一起,不存在初始化不同意的问题