zoukankan html css js c++ java

js /jq 写全选反选不选

HTML 结构部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全/反/不选</title>
</head>
<body>
    <input type="button" value='全选'>
    <input type="button" value='反选'>
    <input type="button" value='不选'>
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</body>
</html>

js写法

<script>
var aInput = document.getElementsByTagName('input');
var ckb = [];

for(var i=0; i<aInput.length; i++ ){
    var that = aInput[i];    
    if(that.type == 'checkbox'){
        ckb.push(that)
    }    
    if(that.type == 'button' && that.value == '全选'){
        that.onclick=function(){
            fn(true)
        }
    }
    if(that.type == 'button' && that.value == '不选'){
        that.onclick=function(){
            fn(false)
        }
    }
    
    if(that.type == 'button' && that.value == '反选'){
        that.onclick=function(){
            fn(false,true)
        }
    }

}

function fn(t,f){
    for(var j=0; j<ckb.length;j++){
        var k = ckb[j];
        if(f){
            
            k.checked=!k.checked
        }else{
            k.checked=t;
        }            
    }
}



</script>

jQ写法

$(function(){
    var btn = $('input[type=button]');
    var ckb = $('input[type=checkbox]')
    btn.click(function(){
        switch($(this).val()){
        case '全选': 
            ckb.prop('checked',true)
            break; 
        case '反选':
            ckb.prop('checked',!ckb.prop('checked'))
            break;
        case '不选':
            ckb.prop('checked',false)
            break;
        
        }    
    })
})

查看全文

相关阅读:
linux 常用命令
 博客园兼容手机端
 博客园点击页面，显示句子
 win10 系统禁止自动更新
 php获取数组中第一个元素或最后一个元素
 设计模式
 高并发抢购
 mySql 数据库优化
 3dMax+VR的安装步骤
 3dmax

原文地址：https://www.cnblogs.com/ysxq/p/6427491.html

js /jq 写 全选 反选 不选

js /jq 写全选反选不选