checkbox全选时，如何让子checkbox全选中时,全选checkbox自动为checked
问题
因为用的是layui框架，要获得checkbox==checked 的总个数，所以要用到class用控制
- checkbox全选时，如何让子checkbox全选中时,全选checkbox自动为checked,就是选中状态
- 如果有一个子checkbox没有选中，全选就自动变为不选中状态
未选状态 class="layui-unselect layui-form-checkbox"
选中状态 class="layui-unselect layui-form-checkbox layui-form-checked"
单个checkbox
<span class="layui-form">
<input type="checkbox" lay-filter="jie" lay-skin="primary">
</span>全选checkbox
<span id="checkAll" class="layui-form">
<input type="checkbox" lay-filter="jie" lay-skin="primary">
</span>jquery
<script>
layui.use('form', function(){
var form = layui.form;
//监听表格复选框选择
form.on('checkbox(jie)', function(){
var number = $(".jie-test-item .layui-form-checked").length;
var numbers = $(".jie-test-item .layui-form-checkbox").length;
var checks = $(".jie-test-item .layui-form-checkbox");
var checkAll = $("#checkAll");
$('#checkNumber').html(number);
console.log($('#checkNumber').html(number));
$("#checkAll").click(function(){
if(checkAll.children("div").hasClass("layui-form-checked")){
checks.addClass("layui-form-checked");
$('#checkNumber').html(numbers);
}else{
checks.removeClass("layui-form-checked");
$('#checkNumber').html(0);
}
})
});
});
</script>完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="layui/css/layui.css"/>
<link rel="stylesheet" href="css/jie.css"/>
</head>
<body>
<section id="checkbox" class="jie-test">
<!--试题-->
<div class="jie-test-item">
<div class="left-box">
<!--单选-->
<span class="layui-form">
<input type="checkbox" lay-filter="jie" lay-skin="primary">
</span>
</div>
<div class="right-box">
<div class="test-title omit">
<span>(阅读理解)</span> do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-difficult">
<button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">平均难度4.0</button>
<button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">2013江西卷</button>
</div>
</div>
</div>
<div class="jie-test-item">
<div class="left-box">
<span class="layui-form">
<input type="checkbox" lay-filter="jie" lay-skin="primary">
</span>
</div>
<div class="right-box">
<div class="test-title omit">
<span>(阅读理解)</span> do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohowdo you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohowdo you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-difficult">
<button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">平均难度4.0</button>
<button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">2013江西卷</button>
</div>
</div>
</div>
<div class="jie-test-item">
<div class="left-box ">
<span class="layui-form">
<input type="checkbox" lay-filter="jie" lay-skin="primary">
</span>
</div>
<div class="right-box">
<div class="test-title omit">
<span>(阅读理解)</span> do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do how do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you dohow do you do
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-content">
<div class="content-title">
<span>( )</span> 1. how do you do ____ do you do
</div>
<div class="content-select clearfix">
<span class="select-item">A. how do you do</span>
<span class="select-item">B. how do you do</span>
<span class="select-item">C. how do you do</span>
<span class="select-item">D. how do you do</span>
</div>
<div class="content-answer">
答案: A
</div>
<div class="content-analysis">
解析: 语句通路，结构浅析
</div>
</div>
<div class="test-difficult">
<button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">平均难度4.0</button>
<button class="layui-btn layui-btn-primary layui-btn-mini jie-btn-radius jie-blue">2013江西卷</button>
</div>
</div>
</div>
<!--分页-->
<div class="pages">
<div class="left-box">
<!--全选-->
<span id="checkAll" class="layui-form">
<input type="checkbox" lay-filter="jieAll" lay-skin="primary">
</span>
</div>
<div class="right-box">
<button class="layui-btn layui-btn-small layui-btn-primary">首页</button>
<button class="layui-btn layui-btn-small layui-btn-primary">上一页</button>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-normal layui-btn-small ">1</button>
<button class="layui-btn layui-btn-primary layui-btn-small">2</button>
<button class="layui-btn layui-btn-primary layui-btn-small">3</button>
</div>
<button class="layui-btn layui-btn-small layui-btn-primary">下一页</button>
<button class="layui-btn layui-btn-small layui-btn-primary">末页</button>
<button class="layui-btn layui-btn-small layui-btn-primary">总共8页</button>
</div>
</div>
<div class="already-select">
<button class="layui-btn layui-btn-normal layui-btn-small jie-btn-radius">已经选择 (<span id="checkNumber">0</span>) 道</button>
<button class="layui-btn layui-btn-primary layui-btn-small jie-blue jie-btn-radius">返回</button>
</div>
</section>
<script src="js/jquery-1.11.3.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use('form', function() {
var form = layui.form;
//监听表格复选框选择
// 单选
form.on('checkbox(jie)', function (data) {
var child = $('.jie-test-item').find('input[type="checkbox"]');
child.each(function(){
var number = child.filter(':checked').length;
$("#checkNumber").html(number);
})
form.render('checkbox');
});
// 全选
form.on('checkbox(jieAll)', function (data) {
var child = $('.jie-test-item').find('input[type="checkbox"]');
child.each(function (index,item) {
item.checked = data.elem.checked;
var number = child.filter(':checked').length;
$("#checkNumber").html(number);
});
form.render('checkbox');
});
});
</script>
<!--试卷展开收起-->
<script>
$(function(){
$('.jie-test .jie-test-item .right-box .test-title').click(function(){
$(this).siblings('.test-content').slideToggle();
$(this).toggleClass("omit");
})
})
</script>
</body>
</html>重新编辑
<!--单选-->
<span class="layui-form">
<input type="checkbox" lay-filter="jie" lay-skin="primary">
</span> <!--全选-->
<span id="checkAll" class="layui-form">
<input type="checkbox" lay-filter="jieAll" lay-skin="primary">
</span><script>
layui.use('form', function() {
var form = layui.form;
//监听表格复选框选择
// 单选
form.on('checkbox(jie)', function (data) {
var child = $('.jie-test-item').find('input[type="checkbox"]');
child.each(function(){
var number = child.filter(':checked').length;
$("#checkNumber").html(number);
})
form.render('checkbox');
});
// 全选
form.on('checkbox(jieAll)', function (data) {
var child = $('.jie-test-item').find('input[type="checkbox"]');
child.each(function (index,item) {
item.checked = data.elem.checked;
var number = child.filter(':checked').length;
$("#checkNumber").html(number);
});
form.render('checkbox');
});
});
</script>
繁华开满天机浏览 474回答 6
6回答
-
慕姐8265434
单全选 form.on('checkbox(checkall)', function(data){ var child = $('.layui-table').find('tbody input[type="checkbox"]'); child.each(function(index, item){ item.checked = data.elem.checked; }); form.render('checkbox'); }); 子元素全选 var $check=0; form.on('checkbox(child)', function(data){ //找到父元素全选按钮 var parent = $('.pro_topbtn').find('.checkall'); if(data.elem.checked){ $check++; }else{ $check--; } //这是子元素的class的length if ($check == $('.childinp').length) { $('.checkall')[0].checked = data.elem.checked; }else{ $('.checkall')[0].checked = false } form.render('checkbox'); }); 以前写过一个你看下 -
慕森卡
$("#allChoose").click(function(){ $(".chooseSingle").prop("checked",this.checked); }) $(".chooseSingle").click(function(){ var flag=true; $(".chooseSingle").each(function() { if (!this.checked) { flag=false; }; }); $("#allChoose").prop("checked",flag); }) -
茅侃侃
没太看懂你想要的是什么 我简单写了下 你看看是你要得不 <body class="body_box"> <div id="body"> <div class="ind"> <ul> <li> <input id='mycheckbox' type="checkbox" lay-filter="jie" lay-skin="primary">1 <ul> <li> <input type="checkbox" lay-filter="jie" lay-skin="primary">1</li> <li> <input type="checkbox" lay-filter="jie" lay-skin="primary">2</li> </ul> </li> <li> <input type="checkbox" lay-filter="jie" lay-skin="primary">2</li> </ul> </div> </div> </body> </html> <script type="text/javascript"> $(function(){ $('#mycheckbox').click(function(){ if(typeof($(this).attr('checked')) == 'undefined'){ $(this).next().find('input').removeAttr('checked'); }else{ $(this).next().find('input').attr('checked','checked'); } }) $('.ind ul li ul li input').click(function(){ if(typeof($(this).attr('checked')) == 'undefined'){ $(this).parent().parent().prev().removeAttr('checked'); } }) }); </script> -
慕尼黑5688855
给子checkbox增加事件，每次操作，判断子checkbox的数量 和 子checkbox的选中数量是否相等，相等即为全部选中了。
随时随地看视频慕课网APP
PHP