兼容ie和firefox版本的js反选 全选 多选框

朋友们说不兼容。昨天晚上回去调试了一个兼容版本：


代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script language="javascript">
function selectIt(action){
    var testform=document.getElementById("bdkey");
    for(var i=0 ;i<testform.elements.length;i++){
        if(testform.elements[i].type=="checkbox"){
            e=testform.elements[i];
            e.checked=(action=="selectAll")?1:(!e.checked);
        }
    }    
}
</script>
</head>
<body>
<form name="bdkey" id="bdkey">
<p class="STYLE1">
全 选
<input type="checkbox" name="selectAll" value="checkbox" onClick="selectIt('selectAll')"><br>
反 选
<input type="checkbox" name="invest" value="checkbox" onClick="selectIt()"><br>
Item1
<input type="checkbox" name="checkbox" value="checkbox">
<br>
Item2
<input type="checkbox" name="checkbox" value="checkbox"><br>
Item3
<input type="checkbox" name="checkbox" value="checkbox"><br>
Item4
<input type="checkbox" name="checkbox" value="checkbox"><br>
Item5
<input type="checkbox" name="checkbox" value="checkbox">
</p>
</form>
</body>

function selectIt(action){
var testform=document.getElementById("bdkey");
for(var i=0 ;i

全 选

反 选

Item1

Item2

Item3

Item4

Item5

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这次兼容测试我刚开始是采用一个经典的js多选框 全选 反选 实现及分析 的实现方式，也就是通过ev.srcElement 但是没调试成功。于是有了现在的方法。兼容性的调试有一部分是依赖于你的实现的方式的，像我这种方式很傻瓜  哈哈但是最简单往往是最有效的。当然，作为技术的追求这来说，我们大家都喜欢用很多高深的方法。这里我是不会

赞 (0)

相关推荐

  • 使用js如何实现全选与全不选

    js: 复制代码 代码如下: function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i<len; i++){ if((el[i].type=="checkbox") && (el[i].name==name)){ el[i].checked = true; } } } function clearAll

  • js实现(全选)多选按钮的方法【附实例】

    js实现(全选)多选按钮的方法【附实例】

    第一种,全部选中: <html> <head> <title>复选框checked属性</title> <script language="JavaScript" type="text/javascript"> function changeState(isChecked) { var chk_list=document.getElementsByTagName("input"); fo

  • js表单处理中单选、多选、选择框值的获取及表单的序列化

    本文总结了下在表单处理中单选.多选.选择框值的获取及表单的序列化,写成了一个对象.如下: var formUtil = { // 获取单选按钮的值,如有没有选的话返回null // elements为radio类的集合的引用 getRadioValue:function(elements) { var value = null; // null表示没有选中项 // 非IE浏览器 if(elements.value != undefined && elements.value != '')

  • 利用Vue.js指令实现全选功能

    因为刚开始接触vue不久,全选的实现参考了知乎上的实现方法: 1.从服务器拿到数据,为每个item设置checked属性 2.计算选中的数量selectCount,如果选中的数量与selectItems的数量相等,则全选selectAll选中 3.点全选时,将每个item的checked属性置为true,反选时置为false, 4.每次selectItems的属性发生变化时,都将checked的为true的item放入数组checkedGroups中 下面为实现代码: //全选 data: fu

  • js实现功能比较全面的全选和多选

    js实现功能比较全面的全选和多选

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <inp

  • 使用javascript实现ListBox左右全选,单选,多选,全请

    复制代码 代码如下: <html><head>    <meta http-equiv="Content-Type " content="text/html;   charset=gb2312 ">    <title>list测试</title></head><body>    <div style="font-size: 10pt;">      

  • JS实现CheckBox复选框全选全不选功能

    CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭.大多数应用程序的"设置"对话框内均有此控件.我们看到的可以打勾的就是CheckBox. 该控件表明一个特定的状态(即选项)是选定 (on,值为1) 还是清除 (off,值为0).在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择.因为 CheckBox 彼此独立工作,所以用户可以同时选择任意多个 CheckBox,进行选项组合. CheckBo

  • AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te

  • 比较全的JS checkbox全选、取消全选、删除功能代码

    看下面两种实现方法: JS checkbox 方法一: 复制代码 代码如下: function checkAll() { var code_Values = document.all['code_Value']; if(code_Values.length){ for(var i=0;i<code_Values.length;i++) { code_Values[i].checked = true; } }else{ code_Values.checked = true; } } functio

  • 使用vue.js实现checkbox的全选和多个的删除功能

    template代码: <template> <div class="hello"> <ul> <li v-for="(item, index) in proData"> <label for=""> <input type="checkbox" :value="index" v-model="selectArr">

随机推荐