JavaScript操作checkbox复选框

时间:2018-04-26
JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成。先获取checkbox元素集合,遍历集合,对集合中的每一项做操作。
 
 
这里讲几个常用的checkbox复选框的常见示例。
 
 
取值
 
<body>  
    <p>  
        <label for="hobby">Hobby:    
            <input type="checkbox" name="hobby" value="reading" />阅读    
            <input type="checkbox" name="hobby" value="climbing" />爬山    
            <input type="checkbox" name="hobby" value="running" />跑步    
            <input type="checkbox" name="hobby" value="fishing" />钓鱼    
            <input type="checkbox" name="hobby" value="cooking" />做饭    
            </br></br>  
            <input type="button" value="Get Value" onclick="getValue()" />  
        </label>  
    </p>  
</body>  
 
 要获取多选框的值,该怎么处理呢?
 
 
跟获取radio单选按钮值的步骤相同。
 
 
1 获取复选框元素集合
 
2 遍历复选框元素
 
3 将选中的复选框的值拼接出来,返回
 
function getValue(){  
    var hobbies = document.getElementsByName("hobby");  
    var value;  
    for (i=0; i<hobbies.length; i++){  
        if (hobbies[i].checked){  
            if (!value){  
                value = hobbies[i].value;  
            } else {  
                value += "," + hobbies[i].value;  
            }  
        }  
    }  
      
    alert(value == undefined ? '' : value);  
}  
这里我们将复选框值拼接出来,之间用“,”分隔,返回的时候,如果没有选中,则返回空字符串,而非JavaScript的默认空值undefined。
 
 
全选
 
全选是复选框中常见的一个操作,选中所有的选项。
 
全选也是基于checked属性的操作,遍历所有的元素项,将每一个元素项的checked属性都置为true。
 
<body>  
    <p>  
        <label for="hobby">Hobby:    
            <input type="button" name="selectAll" value="selectAll" onclick="selectAll()" />全选    
            <input type="button" name="selectOther" value="selectOther" onclick="selectOther()" />反选  
            </br></br>  
            <input type="checkbox" name="hobby" value="reading" />阅读    
            <input type="checkbox" name="hobby" value="climbing" />爬山    
            <input type="checkbox" name="hobby" value="running" />跑步    
            <input type="checkbox" name="hobby" value="fishing" />钓鱼    
            <input type="checkbox" name="hobby" value="cooking" />做饭    
            </br></br>  
            <input type="button" value="Get Value" onclick="getValue()" />  
        </label>  
    </p>  
</body>  
 全选时,首先需要判断当前复选框是否处于全选的状态,然后再适时的全选,或全不选。
 
 
判断是否处于全选状态:true,全选;false,非全选
 
function isSelectAll(){  
    var hobbies = document.getElementsByName("hobby");  
    for (i=0; i<hobbies.length; i++){  
        if (!hobbies[i].checked){  
            return false;  
        }  
    }  
    return true;  
}  
 
全选操作
 
function selectAll(){  
    var hobbies = document.getElementsByName("hobby");  
    if (isSelectAll()){  
        for (i=0; i<hobbies.length; i++){  
            hobbies[i].checked = false;  
        }  
    } else {  
        for (i=0; i<hobbies.length; i++){  
            hobbies[i].checked = true;  
        }  
    }  
}  
 
 
反选
 
反选的操作即选中那些当前没有被选中的项,并将当前选中的项取消。
 
function selectOther(){  
    var hobbies = document.getElementsByName("hobby");  
    for (i=0; i<hobbies.length; i++){  
        if (hobbies[i].checked){  
            hobbies[i].checked = false;  
        } else {  
            hobbies[i].checked = true;  
        }  
    }  
}  
 
上面几个例子,都是本人今天没事写的玩的,里面可能有些操作不是很符合客户体验,如果您有更好的方案,可以提出来。但就通过上面的示例,应该能很好的理解checkbox了吧。
 
 
其实 checkbox和radio一样,都是基于checked属性,对它们的操作就是对checked属性的操作,技术checked属性就可以了。
上一条:jQuery ajax - post() 方法 下一条:PHP+JS实现批量删除数据功能

相关文章

最新文章