[英]jQuery Select Checkbox - Select All
我有以下清单和任务结构
现在,我想要任何人检查一项任务,以确保检查清单也得到检查。 当某人取消选中核对表时,所有任务均应取消选中。
<!-- Checklist -->
<div class="checklist">
<div class="media">
<div class="pull-left checklist-checkbox">
<input class="checklist-input" name="checklist" type="checkbox" value="">
</div>
<div class="media-body task-list">
<h4 class="media-heading">This is a CheckList</h4>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Book your venue.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div>
</div>
<div class="add-task"><a href="#">Add Task</a></div>
<div class="form-add-task">
<form action="addtask.php" method="post">
<input type="text" class="form-control task-input">
<input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task">
</form>
</div>
</div>
</div>
</div>
<div class="checklist">
<div class="media">
<div class="pull-left checklist-checkbox">
<input class="checklist-input" name="checklist" type="checkbox" value="">
</div>
<div class="media-body task-list">
<h4 class="media-heading">This is a CheckList</h4>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body">Search for entertainers that perform the types of shows that are suitable for your function.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Book your venue.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Search for a caterer that is suitable for your function. <span class="label label-default">Lalu - June 23rd, 2014</span></div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Hold a training session for all attending staff and brief them on all activities and expectations for the day of the event.</div>
</div>
<div class="media tasks">
<div class="pull-left task-checkbox">
<input class="task-input" name="task" type="checkbox" value="">
</div>
<div class="media-body"> Appoint an adequate number of staff as greeters to welcome guests and orient them with the event activities and venue.</div>
</div>
<div class="add-task"><a href="#">Add Task</a></div>
<div class="form-add-task">
<form action="addtask.php" method="post">
<input type="text" class="form-control task-input">
<input class="btn btn-sm btn-default" name="submit-task" type="submit" value="Add Task">
</form>
</div>
</div>
</div>
</div>
<!-- / Checklist -->
jQuery代码:
$('input.checklist-input').on('change',function(){
$(this).parent().siblings('.task-list').find('input.task-input').prop('checked',$(this).prop('checked'));
})
与Caio Vianna相似,只是如果不同,并定位适当的列表。 如果不再有已检查的任务,还添加了取消检查清单的功能。 我敢肯定,尽管您可以优化选择器,但仍然应该会有所帮助
$('input.task-input').on('change', function () {
if ($(this).prop('checked') === true) {
$(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', true);
} else {
var checked = $(this).closest('div.task-list').find('input.task-input:checked').length;
if (checked === 0) {
$(this).closest('div.tasks').parent().prev().find('input.checklist-input').prop('checked', false);
}
}
})
当切换主清单时,您的代码将检查所有内容(或不检查所有内容)(可是,当您检查它时,它将检查内部的所有内容,反之亦然)。
您想先测试一下,以便...
$('input.checklist-input').on('change',function(){
if (!$(this).prop('checked'))
$(this).parent().siblings('.task-list').find('input.task-input').prop('checked',false);
})
这只会取消检查,因为只有在未选中主检查清单的情况下它才会运行。 至于其余的
$(input.task-input').on('change',function() {
if ($(this).prop('checked'))
$('input.checklist-input').prop('checked',true);
})
仅当您检查了兄弟姐妹时,才会检查主清单
注意:我的jquery选择器技能很生疏,所以我可能在那儿犯了一些错误,但是我想事情的逻辑很清楚= p
我相信您缺少执行以下逻辑的功能:
.task-input
上的change事件 .task-input
元素的选中项的长度是否超过0
.checklist-input
.checklist-input
这是缺少的功能:
$('input.task-input').on('change', function() {
var tasks = $(this).closest('.task-list').find('input.task-input:checked').length;
$(this).closest('.checklist').find('input.checklist-input').prop('checked',tasks);
});
概念验证小提琴: http : //jsfiddle.net/teddyrised/1cy47tga/1/
您应该分两步进行控制:
对于主级别清单按钮:
$('body').on('change', '.checklist-input', function () { var checked = $(this).prop('checked'); $(this).closest('.checklist').find('.task-input:checkbox').prop('checked', checked); });
对于第二级复选框:
$('body').on('change', '.task-input:checkbox', function () { var checkedArray = []; var $checkboxes = $(this).closest('.checklist').find('.task-input:checkbox'); $checkboxes.each(function () { var checked = $(this).prop('checked'); if (checked) { checkedArray.push(checked); } }); var totalChecked = false; if (checkedArray.length == $checkboxes.length) { totalChecked = true; } $(this).closest('.checklist').find('.checklist-input').prop('checked', totalChecked); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.