checkbox全选

最新推荐文章于 2024-04-04 19:20:16 发布

丸子的博客

最新推荐文章于 2024-04-04 19:20:16 发布

阅读量320

点赞数

分类专栏：前端文章标签： checkbox 全选

本文链接：https://blog.csdn.net/cl_fjx_cs/article/details/53319728

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

整理相关全选checkbox，如图

整了半天attr根本没用，后来查资料说jquery1.6以后attr和prop有区别，没时间细看。直接附上可用的js代码：

function selectAll(){
	if ($('input[name="all"]').prop("checked")) {  
	      $('input[name="expression"]').prop("checked", true);  
	  } else {  
	      $('input[name="expression"]').prop("checked",false); 
	 }  
}
function setSelectAll(box){  
    //当没有选中某个子复选框时，SelectAll取消选中  
    if ($(box).prop("checked")) {  
    	$(box).prop("checked", true);  
    }else{
    	$(box).prop("checked",false);
    }
    var chsub = $("input[type='checkbox'][name='expression']").length; //获取subcheck的个数  
    var checkedsub = $("input[type='checkbox'][name='expression']:checked").length; //获取选中的subcheck的个数  
    if (checkedsub == chsub) {  
        $('input[name="all"]').prop("checked", true);  
    }else{
    	$('input[name="all"]').prop("checked",false);
    }
}

html代码

全选checkbox
<input type="checkbox" name="all" οnclick="selectAll()">
单个子checkbox
<input type="checkbox" οnclick="setSelectAll(this)" name="expression" value="1">

你只看到我在不停的忙碌，却没看到我奋进的热情；
你有你的规则，我有我的选；
你否定我的现在，我决定我的未来；
你嘲笑我只懂编码，不配享受，我可怜你被代码操纵，而不自知；
你可以轻视我的年轻，我会证明这是谁的时代！
Coding是注定痛苦的旅行，路上少不了Bug和Change，但那又怎样？哪怕通宵达旦，也要编的漂亮！
我是程序员，我为自己代言。